前端代码上传文件

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>
相关推荐
远望清一色13 分钟前
基于MATLAB的实现垃圾分类Matlab源码
开发语言·matlab
GIS程序媛—椰子19 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
confiself22 分钟前
大模型系列——LLAMA-O1 复刻代码解读
java·开发语言
DogEgg_00125 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端28 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x31 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟100932 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
XiaoLeisj34 分钟前
【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期
java·开发语言·java-ee
杜杜的man37 分钟前
【go从零单排】go中的结构体struct和method
开发语言·后端·golang
幼儿园老大*38 分钟前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go