最近帮一家公司做微信小程序,采用微信云开发技术,实现后台,遇到一个上传文件的功能,一开始一直报错是提交的body格式不对,后来测试很多次才找出解决方法。
报错如下:The body of your POST request is not well-formed multipart/form-data
解决方法按照文档的顺序设置body数据
后台实现技术:微信云开发
后台管理系统:vue+element-ui
1. 上传采用element-ui的upload
//代码如下
<el-upload
class="upload-demo"
accept="image/*"
:multiple="false"
:action="uploadURL"
:http-request="submitUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
2. 覆盖默认的上传行为,可以自定义上传的实现
:http-request="submitUpload"
submitUpload(file) {
//使用产品id作为图片id
let fileName = this.id + file.file.type.replace('image/','.')
//云端存储路径
let path = "image/brand-image/" + fileName;
//请求临时文件上传链接(其代码下面有)
getUploadFile(path)
.then(res => {
// 给数据赋值
if (res.result.errcode != 0) {
return this.$message.error("上传文件失败,请重新上传!");
} else {
//http请求body部分
//一定要按如下顺序设置属性,此顺序与文档之一致。
//我之前就是顺序不和文档一样,一直400 拒绝访问,显示The body of your POST request is not well-formed multipart/form-d。
let formData = new FormData();
formData.append("key", path);
formData.append("Signature", res.result.authorization);
formData.append("x-cos-security-token", res.result.token);
formData.append("x-cos-meta-fileid", res.result.cos_file_id);
formData.append("file", file.file);
let url = res.result.url;
url = url.replace(
"https://cos.ap-shanghai.myqcloud.com",
"/upload"
);
console.log("upload url", url);
request("post", url, formData, {
"Content-Type": "multipart/form-data"
})
.then(res => {
console.log("uploadFile request res", res);
})
.catch(err => {
console.log("uploadFile request err", err);
});
}
})
.catch(err => {
console.log("err", err);
this.$message.error("上传文件失败,请重新上传!");
});
},
3. getUploadFile(path)
//此处做了代理,代理处理如下
proxyTable: {
'/upload': {
target: 'https://cos.ap-shanghai.myqcloud.com', //请求地址
changeOrigin: true, //true表示跨域
secure: false,
ws: true,
logLevel: 'debug',
pathRewrite: {
'^/upload': ''
}
},
'/api': {
target: 'https://api.weixin.qq.com', //请求地址
changeOrigin: true, //true表示跨域
secure: false, //关闭安全检测,则可以访问没有证书的服务器
ws: true, //webSocket开启
logLevel: 'debug',
pathRewrite: {
'^/api': ''
}
}
},
/**
* 获取上传文件链接
* path: 上传路径
*/
export function getUploadFile(path){
return new Promise(function (resolve, reject) {
var token = localStorage.getItem('accessToken')
var url = '/api/tcb/uploadfile?access_token=' + token
post(url,{
env: 'env',
path: path
}).then(res => {
if (res.errcode == 0) {
resolve({
result: res
})
}
else {
reject({
error: res
})
}
}).catch(err => {
reject({
error: err
})
})
})
}
4. 注意
解决方法按照文档的顺序设置body数据