uniapp如何上传文件file格式到服务器

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

  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值