前端代码上传文件

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>
相关推荐
天下无贼10 分钟前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍12 分钟前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子1 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院1 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰1 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区1 小时前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶1111 小时前
web服务代理用它,还不够吗?
前端
Liamhuo2 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_2 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生2 小时前
React 组件渲染
前端·react.js