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

在 Vue.js 中结合 Axios 和 Element UI 的 el-upload 组件来实现文件上传是一个常见使命，下面是一个基本的实现步骤与代码示例：
1. 安装所需依靠

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

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

复制代码

2. 在 Vue 组件中引入相干依靠

1. // main.js (全局引入)
2. import Vue from 'vue'
3. import ElementUI from 'element-ui'
4. import Axios from 'axios'
6. Vue.use(ElementUI)
7. Vue.prototype.$http = Axios.create({ baseURL: 'your-backend-url' }) // 设置基础 URL
9. // 或者在单个组件中局部引入
10. import { Upload } from 'element-ui'
11. import axios from 'axios'
13. export default {
14.   components: {
15.     ElUpload: Upload,
16.   },
17. }

复制代码

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

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

1. <template>
2.   <el-upload
3.     class="upload-demo"
4.     action=""
5.     :http-request="uploadFile"
6.     :limit="1"
7.     :show-file-list="false"
8.     :data="{ customParam: someValue }" <!-- 可以传递额外参数 -->
9.   >
10.     <el-button size="small" type="primary">点击上传</el-button>
11.   </el-upload>
12. </template>
14. <script>
15. export default {
16.   methods: {
17.     uploadFile(file) {
18.       const formData = new FormData()
19.       formData.append('file', file.file)
21.       // 添加其他自定义参数
22.       formData.append('customField', 'customValue')
24.       this.$http.post('/api/upload', formData).then(response => {
25.         // 处理上传成功后的响应
26.         console.log(response.data)
27.       }).catch(error => {
28.         // 处理错误
29.         console.error(error)
30.       })
31.     },
32.   },
33. }
34. </script>

复制代码

上面的代码中：

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

假如你必要支持多文件同时上传，你必要在 uploadFile 方法中处理多个文件，并且在 Axios 请求中发送一个包含全部文件的 FormData。
4. 后端处理上传请求

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。