uniapp做物业报修APP:任务创建(2)，多图片上传

上一篇我们实现了保存新任务的文字部分，并用json返回了新任务的ID，这一篇我们实现上传图片。

其实在脑子里一想，这个功能很简单，但实际做起来，还是要啰嗦很多行代码。

上传图片要用到uni.uploadFile这个API，这个API本身支持多文件上传，如果是做APP之类的，可以直接使用。但是微信小程序里不提供多文件上传功能，因此我们要用递归实现一个一个的上传。

首先我们要封装一个上传文件的API，虽然用得少，但我还是把它封闭成全局的了，代码如下：

/**
 * 循环递归上传图片
 * sData为参数，里面的 .tempFilePaths数组 存储了要上传的临时图片文件们，
 *  .uploadIndex 为当前要上传哪个。
 * callBackFun 为上传成功后的回调（每成功一个调用一次）
 * progressFun 为上传中的进度条
 * 这个uni.uploadFile一次可以上传N个文件，但是
 * 在微信小程序里，每次只能上传一个。所以
 * 在这里递归调用，把所有文件上传。
 */
Vue.prototype.uploadAPI = function(sData, callBackFun, progressFun = false) {
	if (!sData.hasOwnProperty("class") || !sData.hasOwnProperty("fun") || sData.tempFilePaths.length < 1) {
		//如果data对象里没有这两个属性，就不是一个合格的调用。
		return false;
	}
	//keyStr我放外面去了
	sData.sKey = md5(md5(keyStr) + md5(sData.class) + md5(sData.fun) + md5(new Date().format("yyyy-MM-dd")));

	var that = this;
	var uploadTask = uni.uploadFile({
		url: "https://***.***.com/***/iLaoZhao/DaYeLaiWanA.php",
		filePath: sData.tempFilePaths[sData.uploadIndex], //每次只传一个文件
		name: 'file',
		formData: sData,
		success: (uploadFileRes) => {
			callBackFun(uploadFileRes, sData.uploadIndex);
			sData.uploadIndex ++; //文件游标+1
			if(sData.uploadIndex < sData.tempFilePaths.length){
				that.uploadAPI(sData, callBackFun, progressFun); //递归调用自己传下一个
			}
		}
	});

  //监视上传进度
	uploadTask.onProgressUpdate((res) => {
		if(progressFun != false) progressFun(res, sData.uploadIndex);
	});
}

新建任务的APP的VUE文件我全部放一下吧，因为改了很多东西：