8***@qq.com
8***@qq.com
  • 发布:2021-06-03 11:27
  • 更新:2021-06-03 11:27
  • 阅读:475

【报Bug】vue打包app 上传图片问题

分类:HTML5+

产品分类: HTML5+

HBuilderX版本号: 3.1.13

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: 小米8

打包方式: 云端

示例代码:

<input
type="file"
ref="clearFile"
style="display:none"
@change="uploadImg($event)"
class="add-file-right-input"
accept="image/png,image/jpeg,image/gif,image/jpg"
/>

uploadPortrait(flag) {
console.log("=====flag======", flag);
this.uploadFlag = flag;
this.$refs.clearFile.click(); //上传文件
},
uploadImg(e) {
console.log("====ee====", e);
let file = e.target.files || e.dataTransfer.files; //target事件
// let docObj = document.getElementById("file");
console.log("=======file=====", file);
// console.log("=======file===111==", docObj.files);
this.uploadBackstage(file);
// this.$refs.clearFile.value = ""; //上传文件后重置
},
uploadBackstage(files) {
let formData = new window.FormData();
formData.append("userId", this.userId);
formData.append("type", 1);
// let mainUrls = "http://120.26.91.101/api/daikin/userPublicInfo/upload";
// let imgPath = "";
for (let i = 0; i < files.length; i++) {
formData.append("multipartFile", files[i]);
// imgPath = this.getUrl(files[i]);
console.log("====getUrl===", files[i].name);
}
upload(formData)
.then(res => {
this.$refs.clearFile.value = "";
console.log("res===", this.uploadFlag);
if (this.uploadFlag === 1) {
this.form.portrait = res.body.url;
} else if (this.uploadFlag === 2) {
this.form.backgroundPortrait = res.body.url;
}
console.log("====this.form.portrait====", this.form.portrait);
})
.catch(() => {
this.$refs.clearFile.value = "";
});
}

export function upload(data) {
return request({
url: "daikin/userPublicInfo/upload",
method: "post",
data: data,
headers: {
"Content-Type": "multipart/form-data"
}
});
}

操作步骤:

点击上传图片

预期结果:

图片上传成功

实际结果:

接口报错

bug描述:

通过<input
type="file"
ref="clearFile"
style="display:none"
@change="uploadImg($event)"
class="add-file-right-input"
accept="image/png,image/jpeg,image/gif,image/jpg"
/>
上传图片,axios设置了headers: {
"Content-Type": "multipart/form-data"
}
但是在network的接口上面没有发现content-Type,并且接口报错400,但是在pc浏览器上面是正常的

2021-06-03 11:27 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复