12月252019
Ant Design Vue 开发时 upload 自定义手动上传 Axios(ajax)时 new FormData() 出现 [object Object]
随笔技术知识阅读4302 标签: 前端
> 在使用Ant Design Vue 开发时会用到内置的upload,但是在用到内置的upload的时候,由于官网的说明文档比较简洁,总是出现这样那样的问题! ## 一、手动上传官方样例: ```vue <template> <div class="clearfix"> <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload"> <a-button> <a-icon type="upload" /> Select File </a-button> </a-upload> <a-button type="primary" @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px" > {{uploading ? 'Uploading' : 'Start Upload' }} </a-button> </div> </template> <script> import reqwest from 'reqwest'; export default { data() { return { fileList: [], uploading: false, }; }, methods: { handleRemove(file) { const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, beforeUpload(file) { this.fileList = [...this.fileList, file]; return false; }, handleUpload() { const { fileList } = this; const formData = new FormData(); fileList.forEach(file => { formData.append('files[]', file); }); this.uploading = true; // You can use any AJAX library you like reqwest({ url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', method: 'post', processData: false, data: formData, success: () => { this.fileList = []; this.uploading = false; this.$message.success('upload successfully.'); }, error: () => { this.uploading = false; this.$message.error('upload failed.'); }, }); }, }, }; </script> ``` >**按照官网给的样例是么有问题的!!!** ## 二、完全控制的上传列表官方样例: ```vue <template> <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" :fileList="fileList" @change="handleChange" > <a-button> <a-icon type="upload" /> Upload </a-button> </a-upload> </template> <script> export default { data() { return { fileList: [ { uid: '-1', name: 'xxx.png', status: 'done', url: 'http://www.baidu.com/xxx.png', }, ], }; }, methods: { handleChange(info) { let fileList = [...info.fileList]; // 1. Limit the number of uploaded files // Only to show two recent uploaded files, and old ones will be replaced by the new fileList = fileList.slice(-2); // 2. read from response and show file link fileList = fileList.map(file => { if (file.response) { // Component will show file.url as link file.url = file.response.url; } return file; }); this.fileList = fileList; }, }, }; </script> ``` > 此样例的的功能是,可以通过change事件控制上传文件的类型、大小、数量等等做限制,**按照这个样例也是没有问题!!!** ## 三、但是,我们把这两个结合就会出现问题了: - 1、错误演示代码: ```vue <template> <div class="clearfix"> <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload" @change="handleChange"> <a-button> <a-icon type="upload" /> Select File </a-button> </a-upload> <a-button type="primary" @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px" > {{uploading ? 'Uploading' : 'Start Upload' }} </a-button> </div> </template> <script> import reqwest from 'reqwest'; export default { data() { return { fileList: [], uploading: false, }; }, methods: { handleRemove(file) { const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, beforeUpload(file) { this.fileList = [...this.fileList, file]; return false; }, handleChange(info) { let fileList = [...info.fileList]; // 1. Limit the number of uploaded files // Only to show two recent uploaded files, and old ones will be replaced by the new fileList = fileList.slice(-2); // 2. read from response and show file link fileList = fileList.map(file => { if (file.response) { // Component will show file.url as link file.url = file.response.url; } return file; }); this.fileList = fileList; }, handleUpload() { const { fileList } = this; const formData = new FormData(); fileList.forEach(file => { formData.append('files[]', file); }); this.uploading = true; // You can use any AJAX library you like reqwest({ url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', method: 'post', processData: false, data: formData, success: () => { this.fileList = []; this.uploading = false; this.$message.success('upload successfully.'); }, error: () => { this.uploading = false; this.$message.error('upload failed.'); }, }); }, }, }; </script> ``` - 2、正确演示代码: ```vue <template> <div class="clearfix"> <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload" @change="handleChange"> <a-button> <a-icon type="upload" /> Select File </a-button> </a-upload> <a-button type="primary" @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px" > {{uploading ? 'Uploading' : 'Start Upload' }} </a-button> </div> </template> <script> import reqwest from 'reqwest'; export default { data() { return { fileList: [], uploading: false, }; }, methods: { handleRemove(file) { const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, beforeUpload(file) { this.fileList = [...this.fileList, file]; return false; }, handleChange(info) { let fileList = [...info.fileList]; // 1. Limit the number of uploaded files // Only to show two recent uploaded files, and old ones will be replaced by the new fileList = fileList.slice(-2); // 2. read from response and show file link fileList = fileList.map(file => { if (file.response) { // Component will show file.url as link file.url = file.response.url; } return file; }); this.fileList = fileList; }, handleUpload() { const { fileList } = this; const formData = new FormData(); fileList.forEach(file => { formData.append('files[]', file.orignFileObj); }); this.uploading = true; // You can use any AJAX library you like reqwest({ url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', method: 'post', processData: false, data: formData, success: () => { this.fileList = []; this.uploading = false; this.$message.success('upload successfully.'); }, error: () => { this.uploading = false; this.$message.error('upload failed.'); }, }); }, }, }; </script> ``` - 3、对比以上两块代码你会发现问题在 handleUpload() 下的这个地方: 官网单独的手动上传样例: ``` fileList.forEach(file => { formData.append('files[]', file); }); ``` 改动后的代码: ``` fileList.forEach(file => { formData.append('files[]', file.orignFileObj); }); ``` > 为什么把`file`改成`file.orignFileObj`呢? - 因为:你可以 打印下file 看下内容: 1、没有添加 change 的 handleChange() 时 file 的内容是: ``` file: File(118) { lastModified: 1577163396357, lastModifiedDate:"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)", name:"xxx.xlsx", size:118, type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", uid:"vc-upload-1577245939870-2", webkitRelativePath:"" } ``` 2、添加了 change 的 handleChange() 时 file 的内容是: ``` file: { lastModified:1577163396357, lastModifiedDate:"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)", name:"xxx.xlsx", originFileObj:File(118) { lastModified: 1577163396357, lastModifiedDate:"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)", name:"xxx.xlsx", size:118, type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", uid:"vc-upload-1577245939870-2", webkitRelativePath:"" }, percent:0, size:118, type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", uid:"vc-upload-1577245939870-2" } ``` - 所以如果你把两个样例组合还按照原有的不变,传`file`,那他传的就是"object Object",不是文件了,所以改成`file.orignFileObj`就可以了。 ## 总结: >由此可以确定:如果自己自定义 `new FormData()` 然后 `ajax`上传文件,传文件的`orignFileObj`
幻灯片
朦胧
热情
清幽
青翠
花红
清新
黑夜
\n```\n\n>**按照官网给的样例是么有问题的!!!**\n\n## 二、完全控制的上传列表官方样例:\n\n```vue\n\n\n```\n\n> 此样例的的功能是,可以通过change事件控制上传文件的类型、大小、数量等等做限制,**按照这个样例也是没有问题!!!**\n\n## 三、但是,我们把这两个结合就会出现问题了:\n\n- 1、错误演示代码:\n\n```vue\n\n\n```\n\n- 2、正确演示代码:\n\n```vue\n\n\n```\n\n- 3、对比以上两块代码你会发现问题在 handleUpload() 下的这个地方:\n\n官网单独的手动上传样例:\n\n```\nfileList.forEach(file => {\n formData.append('files[]', file);\n});\n```\n\n改动后的代码:\n\n```\nfileList.forEach(file => {\n formData.append('files[]', file.orignFileObj);\n});\n```\n\n> 为什么把`file`改成`file.orignFileObj`呢?\n\n- 因为:你可以 打印下file 看下内容:\n1、没有添加 change 的 handleChange() 时 file 的内容是:\n\n```\nfile: File(118) {\n lastModified: 1577163396357,\n lastModifiedDate:\"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)\",\n name:\"xxx.xlsx\",\n size:118,\n type:\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n uid:\"vc-upload-1577245939870-2\",\n webkitRelativePath:\"\"\n}\n```\n\n2、添加了 change 的 handleChange() 时 file 的内容是:\n\n```\nfile: {\n lastModified:1577163396357,\n lastModifiedDate:\"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)\",\n name:\"xxx.xlsx\",\n originFileObj:File(118) {\n lastModified: 1577163396357,\n lastModifiedDate:\"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)\",\n name:\"xxx.xlsx\",\n size:118,\n type:\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n uid:\"vc-upload-1577245939870-2\",\n webkitRelativePath:\"\"\n },\n percent:0,\n size:118,\n type:\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n uid:\"vc-upload-1577245939870-2\"\n}\n\n```\n\n- 所以如果你把两个样例组合还按照原有的不变,传`file`,那他传的就是\"object Object\",不是文件了,所以改成`file.orignFileObj`就可以了。\n\n## 总结:\n\n>由此可以确定:如果自己自定义 `new FormData()` 然后 `ajax`上传文件,传文件的`orignFileObj`\n\n\n\n\n","interestIds":"","hit":4302},"interestLoading":false,"interest":[]}}; window.APlayer_config_urls = ["http://rap2api.taobao.org/app/mock/247994/pc/APlayer","http://yapi.liqingsong.cc/mock/19/pc/APlayer"];