前端代码上传文件

html 复制代码
<template>
  <el-upload :class=BASE_URL drag :action="API_CONFIG.uploadFile" type="file" multiple :limit="1"
    accept=".xlsx,.xls,.yaml,.yml,.execl,.json" v-model:file-list="file" :http-request="handleUploadFile">
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload_font">
      <em>点击上传文件</em>
    </div>
  </el-upload>
</template>

<script setup lang="js">
import { ElNotification } from 'element-plus'
import { API_CONFIG } from '../config/index.js'
import { UploadFilled } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import {BASE_URL} from '../config/index'
import axios from 'axios'

const form = reactive({
  name: '',
  file: '',
})

const handleUploadFile = (v) => {
  form.file = v.file
  form.name = v.name
  let formData = new FormData()
  formData.append("name", form.name)
  formData.append("file", form.file)
  axios.post(API_CONFIG.uploadFile, formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }).then((response) => {
    if (response.data.status == 200) {
      ElNotification({
        title: 'Success',
        message: response.data.message,
        type: 'success',
      })
    } else {
      ElNotification({
        title: 'Error',
        message: '上传失败!',
        type: 'error',
      })  
    }
  })
}
</script>
相关推荐
nbsaas-boot2 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7892 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨2 小时前
GO 启动 简单服务
开发语言·后端·golang
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
斯普信专业组2 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构