前端开发,移动端开发,uni-app多端开发之文件上传

使用uni-app框架开发项目,已经有一段时间了,对框架熟悉度有提高,也有了更多的了解。开发起来上手是相当的快速,只要有Vue的基础以及开发过小程序的开发者,上手是真的很快,uni-app的框架也是小程序开发框架,更高效。

今天主要是想要分享一个uni-app框架的上传功能,当然这个功能是很普遍的,我只是刚好对自己开发的项目,做一个小小的分享和记录,也给就当是给自己积累技术经验啦。

根据项目需求其实就是一个文件的上传,图片,视频和音频的上传功能,但是在uni-app框架里面提供的api接口呢,只有单文件上传,只有在5+APP开发才有多文件上传,并且需要上传服务器返回正确的文件地址,最后提交的时候才一起提交就可以,才是正完成了。

但是在我的开发的项目,h5端和小程序也需要做多图上传的功能,所以我在基础上根据官方提供的思路做了,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。这样的话才可以满足到我自身项目的需求。

其实这个可以封装成一个组件,但是项目开发时间紧迫,所以就没有做封装处理,项目只有里面也只有一个地方使用到了,在之后的有时间在做整理出来吧。

我是开发图片上传,在开发的时候需要做的单图上传,和多图上传。所以在代码是写了一些判断,和循环调用api上传接口,完成多图上传的功能,简单的思路,全靠代码实现。

在h5 端只能设置单图选择和多图选择,不能小程序一样直接设置选择多少个图片,小程序最多选择是九张图片。

//代码片段

set_chooseImage: async function () {

_that = this;

//上传接口函数

var _upload = function(tempFilePaths){

uni.uploadFile({

url: _that.m_url+'/api/uploadfiles',//仅为示例,非真实的接口地址

filePath: tempFilePaths,

name: 'img',

sccess:function(res){

var data = JSON.parse(res.data);

if(data.code == 200){

_that.set_file_url = data.url;//返回的地址路径

uni.hideLoading();

}else{

uni.showToast({

title:data.msg,

icon:"none"

});

};

},

fail:function(res){

}

});

};

// 选择图片

uni.chooseImage({

count: 9, //默认9

success: (res) => {

var img_arr = res.tempFilePaths;

// 判断选择的图片是多图

if(img_arr.length > 1){

var img_len = img_arr.length - 1;

img_arr.forEach(function(item,index){

var tempFilePaths = item;

uni.showLoading({

title:'上传中...',

mask:true

});

_upload(tempFilePaths);//上传接口调用

});

}else if(img_arr.length == 1){

// 判断选择的图片是单图

var tempFilePaths = res.tempFilePaths[0];

uni.showLoading({

title:'上传中...',

mask:true

});

_upload(tempFilePaths );//上传接口调用

};

}

})

},

这是我使用的上传的方法,分享给大家,也希望这个思路能帮助到你,或者有更加的好的方法,也可以给我指导一下,提升技术发挥出更好的技术,相互学习共同进步。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190819A0R8OM00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券