前端代码上传文件

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>
相关推荐
共享家952726 分钟前
QT-常用控件(一)
开发语言·qt
Y学院29 分钟前
实战项目:鸿蒙多端协同智能家居控制 App 开发全流程
开发语言·鸿蒙
天生我材必有用_吴用33 分钟前
Vue3 + VitePress 搭建组件库文档平台(结合 Element Plus 与 Arco Design Vue)—— 超详细图文教程
前端
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San301 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
ttyyttemo1 小时前
Column,rememberScrollState,记住滚动位置
前端
dlraba8022 小时前
用 Python+OpenCV 实现实时文档扫描:从摄像头捕捉到透视矫正全流程
开发语言·python·opencv
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
vortex52 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人2 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust