使用http-request 属性替换action绑定上传URL

在 Element UI 的 <el-upload> 组件中，如果你需要为上传的 HTTP 请求添加自界说的请求头（例如，为了通过身份验证或满意服务器端的特定要求），你不能直接在 <el-upload> 组件的属性中设置这些请求头。但是，你可以通过 http-request 属性来自界说上传的行为，包括设置请求头。
http-request 属性答应你完全控制上传的行为，包括如何构建请求、发送请求以及处理响应。这样，你就可以使用像 request.js 这样的自界说库来发送带有请求头的请求了。
下面是一个使用 http-request 属性来替换默认的上传行为，并添加自界说请求头的例子：

1. <template>  
2.   <el-upload  
3.     class="upload-demo"  
4.     :http-request="customUpload"  
5.     list-type="picture-card"  
6.     :on-preview="handlePreview"  
7.     :on-remove="handleRemove"  
8.     :file-list="fileList"  
9.     multiple  
10.   >  
11.     <i class="el-icon-plus"></i>  
12.   </el-upload>  
13. </template>  
14.   
15. <script>  
16. // 假设你有一个名为 request.js 的文件，里面有一个名为 postWithHeaders 的函数  
17. // 你可以根据自己的需求修改这个函数，以适应你的 `request.js`  
18. import { postWithHeaders } from './request';  
19.   
20. export default {  
21.   data() {  
22.     return {  
23.       fileList: [],  
24.       uploadUrl: '你的上传URL', // 注意：虽然这里设置了 uploadUrl，但在使用 http-request 时不会被使用  
25.     };  
26.   },  
27.   methods: {  
28.     customUpload(file) {  
29.       // 这里可以添加你的自定义逻辑，比如检查文件类型、大小等  
30.   
31.       // 使用你的 request.js 中的 postWithHeaders 函数来发送带有请求头的请求  
32.       // 注意：这里你需要根据你的 request.js 的 API 来调整以下代码  
33.       postWithHeaders(this.uploadUrl, file, {  
34.         headers: {  
35.           // 你的请求头  
36.           'Authorization': 'Bearer 你的令牌',  
37.           'Content-Type': 'multipart/form-data',  
38.           // 其他必要的请求头  
39.         },  
40.         onUploadProgress: progressEvent => {  
41.           let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);  
42.           // 你可以在这里处理上传进度  
43.         },  
44.         success: response => {  
45.           // 处理上传成功的逻辑  
46.           // 例如，更新 fileList 或显示成功消息  
47.         },  
48.         error: error => {  
49.           // 处理上传失败的逻辑  
50.           // 例如，显示错误消息  
51.         },  
52.       });  
53.   
54.       // 注意：由于 Element UI 的 <el-upload> 默认会期望一个 Promise 来处理异步操作  
55.       // 但如果你使用的是自定义的异步方法（如上面的 postWithHeaders），它可能不返回 Promise  
56.       // 在这种情况下，你可能需要手动处理上传状态的更新（如上面的 success 和 error 回调）  
57.       // 或者，你可以修改 postWithHeaders 使其返回一个 Promise  
58.     },  
59.     handlePreview(file) {  
60.       console.log('preview', file);  
61.     },  
62.     handleRemove(file, fileList) {  
63.       console.log('remove', file, fileList);  
64.     },  
65.   },  
66. };  
67. </script>

复制代码

请注意，上面的 postWithHeaders 函数是一个假设的函数，你需要根据你的 request.js 文件中的实际 API 来实现它。如果你的 request.js 文件中的函数不支持像上面那样直接转达文件和处理函数，你可能需要调整你的请求发送逻辑，以顺应 <el-upload> 组件的需求。
另外，请注意，由于 <el-upload> 组件默认期望 http-request 方法的返回值是一个 Promise，如果你的自界说方法不返回 Promise，那么你可能需要手动处理文件列表的更新和错误处理。如果你希望保持与 <el-upload> 组件的默认行为更一致，建议让你的 postWithHeaders 函数返回一个 Promise。

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