前言:使用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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐