vue+axios+el-upload实现文件上传

在 Vue.js 中结合 Axios 和 Element UI 的 el-upload 组件来实现文件上传是一个常见任务，下面是一个基本的实现步骤与代码示例：

1. 安装所需依赖

确保你已经在项目中安装了 Axios 和 Element UI：

npm install axios element-ui --save
# 或者使用 yarn
yarn add axios element-ui
1
2
3

2. 在 Vue 组件中引入相关依赖

// main.js (全局引入)
import Vue from 'vue'
import ElementUI from 'element-ui'
import Axios from 'axios'

Vue.use(ElementUI)
Vue.prototype.$http = Axios.create({ baseURL: 'your-backend-url' }) // 设置基础 URL

// 或者在单个组件中局部引入
import { Upload } from 'element-ui'
import axios from 'axios'

export default {
  components: {
    ElUpload: Upload,
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. 使用 el-upload 组件并配置 http-request

在 Vue 组件模板中使用 el-upload 并设置 http-request 属性以覆盖默认的上传行为，这样你可以自定义上传逻辑。

<template>
  <el-upload
    class="upload-demo"
    action=""
    :http-request="uploadFile"
    :limit="1"
    :show-file-list="false"
    :data="{ customParam: someValue }" <!-- 可以传递额外参数 -->
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    uploadFile(file) {
      const formData = new FormData()
      formData.append('file', file.file)

      // 添加其他自定义参数
      formData.append('customField', 'customValue')

      this.$http.post('/api/upload', formData).then(response => {
        // 处理上传成功后的响应
        console.log(response.data)
      }).catch(error => {
        // 处理错误
        console.error(error)
      })
    },
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

上面的代码中：

• http-request 属性被设置为 uploadFile 方法，当用户选择文件并触发上传时，此方法会被调用。
• FormData 对象用于构建包含所选文件和其他可能的自定义数据的请求体。
• 使用 Axios 发送 POST 请求到指定的后端 API 路径 /api/upload。

如果你需要支持多文件同时上传，你需要在 uploadFile 方法中处理多个文件，并且在 Axios 请求中发送一个包含所有文件的 FormData。

4. 后端处理上传请求

确保您的后端服务器已正确配置，能够接收并处理 multipart/form-data 类型的 POST 请求，并能存储接收到的文件。后端的具体实现会根据使用的框架和技术栈而有所不同（如 Express.js、Django、Spring Boot 等）。