前端代码上传文件

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>
相关推荐
Struggler2813 分钟前
Chrome插件开发
前端
apihz11 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
前端 贾公子16 分钟前
Monorepo + vite 怎么热更新
前端
coding随想25 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
爱吃烤鸡翅的酸菜鱼44 分钟前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf