记一次Bug : 表单提交时携带不上文件数据

发表于:2020-4-30 10:41  作者:星沉   来源:稀土掘金

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: Bug 软件测试管理 缺陷管理

  前言
  这段时间我负责的基于 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),我们将立即处理。

评 论

论坛新帖

顶部 底部


建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海瀛东律师事务所 张楠律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2020, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道