前端代码上传文件

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>
相关推荐
岁月宁静22 分钟前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
Dfreedom.25 分钟前
一文掌握Python四大核心数据结构:变量、结构体、类与枚举
开发语言·数据结构·python·变量·数据类型
一半烟火以谋生26 分钟前
Python + Pytest + Allure 自动化测试报告教程
开发语言·python·pytest
虚行26 分钟前
C#上位机工程师技能清单文档
开发语言·c#
小羊在睡觉1 小时前
golang定时器
开发语言·后端·golang
心易行者1 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
CoderCodingNo1 小时前
【GESP】C++四级真题 luogu-B4068 [GESP202412 四级] Recamán
开发语言·c++·算法
saadiya~1 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge2 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再2 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net