前言
这段时间我负责的基于 coreui/vue 的后台管理项目遇到难题了。在开发商品上架功能时，表单提交时，上传的图片数据始终为空，参数携带不了。但在发送请求之前是可以正常打印文件数据的。
尝试解决
1、设置 content-type
let config = { headers: { "Content-Type": "multipart/form-data" } }; this.$http .post("/product/add", params, config) .then().catch() |
结果是不 OK。
2、尝试组件的其他 API 进行 files 字段赋值，确认是不是 v-model 无效？
<b-form-group label="商品缩略图" label-for="fileInput" :label-cols="3"> <!-- plain: 采用默认的原始样式，multiple: 多选 --> <b-form-file id="fileInput" v-model="goodsData.files" placeholder="选择一张图片" drop-placeholder="拖拽图片到这里" accept="image/*" browseText="浏览" @change="uploadPicture" @input="selectPicture" ></b-form-file> </b-form-group> // methods ，赋值过程不再复现 uploadPicture(e) { console.log(e.target.files); }, selectPicture(val) { console.log(val); } |
结果依旧不行。
2、尝试操作 b-form-file 的 name 属性依旧不行。
转机
近几日管理系统项目赶进度要上测试环境，对应的小程序要上体验版。就再次网上查了查文件上传，运行了网上一个文件上传案例时，发现需要 new FormData 实例，将 files 文件数据 append 进实例就可以了。
解决
实例代码：
onSubmit() { if (Object.values(this.goodsData).indexOf("") !== -1) { this.showErrorMsg({ message: "有必填项为空" }); return; } if (this.goodsData.files.length === 0) { this.showErrorMsg({ message: "请至少上传一张图片" }); return; } // 表单提交，数据处理 let params = new FormData(); // params.append('files', this.goodsData.files) for (let key in this.goodsData) { params.append(key, this.goodsData[key]); } let config = { headers: { "Content-Type": "multipart/form-data" } }; this.$http .post("/product/add", params, config) // .post("/product/add", this.goodsData) .then(res => { // 略 }) .catch(error => { // 略 }); }, |
问题被完美解决。
总结
vue + axios 实现文件上传在拿到文件数据后还需要满足一下条件
1）默认的 content-type 为 json, 需要设置为 formdata格式的。
2）new FormData 实例，将需要传递的参数 append 进 实例中。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
