前端开发，移动端开发，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 );//上传接口调用

};

}

})

},

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