前端代码上传文件

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>
相关推荐
Thomas_Cai11 分钟前
Python后端flask框架接收zip压缩包方法
开发语言·python·flask
霍先生的虚拟宇宙网络13 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing15 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
彪82516 分钟前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
魔道不误砍柴功22 分钟前
实际开发中的协变与逆变案例:数据处理流水线
java·开发语言
鲤籽鲲30 分钟前
C# MethodTimer.Fody 使用详解
开发语言·c#·mfc
亚图跨际33 分钟前
Python和R荧光分光光度法
开发语言·python·r语言·荧光分光光度法
jessezappy33 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
Rverdoser41 分钟前
RabbitMQ的基本概念和入门
开发语言·后端·ruby
dj244294570744 分钟前
JAVA中的Lamda表达式
java·开发语言