前言:使用uniapp开发混合app时碰到后台需要发送multipart/form-data请求(传文件file对象),但uni.request发送form-data请求无效(uni.request无法发送文件file对象),而且uniapp不支持 new FormData,会报错:TypeError: Cannot read property 'indexOf' of undefined,因此可以使用html5+ api中的Uploader模块来解决
报错如以下:
解决方法(注:只能用于app):
1 先创建一个上传文件的任务
let uploadFileTask = plus.uploader.createUpload(
"服务器接口地址", {
method: "POST",
headers: {
// 修改请求头Content-Type类型 此类型为文件上传
"Content-Type": "multipart/form-data"
}
},
// data:服务器返回的响应值 status: 网络请求状态码
(data, status) => {
// 请求上传文件成功
if (status == 200) {
// 获取data.responseText之后根据自己的业务逻辑做处理
let result = data.responseText;
}
// 请求上传文件失败
else {
console.log("上传失败", status)
}
}
);
2 添加需要上传的文件数据以及其他的数据
// 添加图片
//app本地资源路径 例子:
//例:_doc/uniapp_temp_1640249372415/compressed/1640250508080_photo_002.jpg
uploadFileTask.addFile('app本地资源路径', {
key: "字段名" // 填入图片文件对应的字段名
});
//添加其他表单字段(参数) 两个参数可能都只支持传字符串
uploadFileTask.addData("参数名",参数值);
3 调取上传方法 开始上传
// 开始上传
uploadFileTask.start();
上传到服务器的数据类似于formData提交的格式 如此图
file文件是通过uploadFileTask.addFile添加 其他参数都是uploadFileTask.addData添加
h5+还有很多操作方法详情可查看HTML5+ API Reference