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文件我全部放一下吧，因为改了很多东西：
<template>
<view>
<view class="title">
工单内容：
<button style="float:right;" type="primary" size="mini" @click="newTask">确定</button>
</view>
<view>
<textarea v-model="content" class="ta" placeholder="工单内容" />
</view>
<view class="uploadPic">
<block v-for="(imgsrc, index) in pics">
<view class="item">
<view @click="delPic(index)" class="delBtn">X</view>
<image @click="preViewPic(index)" :src="imgsrc" style="width:100%;height:100%;"></image>
</view>
</block>
<view class="item itemAdd" @click="selectPic"><image src="../../static/add-image.png" style="width:60rpx;height:60rpx;"></image></view>
</view>
<uni-popup ref="popup" type="top" backgroundColor="#fff" style="width:100%;box-shadow:0rpx 8rpx 50rpx #c8c8c8;">
<view style="padding:50rpx;font-size:22rpx;line-height:200%;width:100%;">
<view>创建任务：{{cTask_curr}}</view>
<view>图片上传：{{cTask_picIndex}}/{{cTask_picCount}}</view>
<view>{{cTask_picUpSize}}/{{cTask_picSize}}</view>
<view style="width:80%;"><progress :percent="cTask_progress" show-info stroke-width="3" /></view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
userMsg : false,
pics:[], //存放选择的照片
content:"",
taskID : -1,
uploadedPics:[],
cTask_curr:'正在创建...',
cTask_picCount:0,
cTask_picIndex:0,
cTask_picSize:0,
cTask_picUpSize:0,
cTask_progress:0
}
},
onShow() {
this.userMsg = this.getLoginMsg();
if(this.userMsg == false){
uni.showModal({
title: '错误',
content: '还没有登录呢。现在转到登录页吗？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
uni.reLaunch({
url:"../login/login"
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
return;
}
},
methods: {
selectPic:function(e){
//从图库选择照片，或者从相机拍照片
var that = this;
uni.chooseImage({
success: function (res) {
that.pics = that.pics.concat(res.tempFilePaths);
}
});
},
preViewPic:function(index){
//点击照片时进行全屏预览
let photoList = this.pics.map(item => {
return item;
});
uni.previewImage({
current: index, // 当前显示图片的链接/索引值
urls: photoList, // 需要预览的图片链接列表，photoList要求必须是数组
loop:true // 是否可循环预览
});
},
delPic:function(index){
//点删除按钮时删除该照片
this.pics.splice(index,1);
},
newTask:function(e){
if(this.content.length < 1){
uni.showModal({
title: '错误',
content: '任务内容不能为空。',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
return;
}
//别看上面这么多行，其实就是两个函数，所以就不分开处理了
//既登录了又有内容，下面就得新建任务了。
this.$refs.popup.open('top');
this.cTask_curr = '创建任务...';
this.cTask_picCount = this.pics.length;
this.cTask_picIndex = 0;
this.cTask_picSize = 0;
this.cTask_picUpSize = 0;
this.cTask_progress = 0;
var that=this;
this.requestAPI({
class : "tasks",
fun : "new",
phoneNum : that.userMsg.userPhone,
vCode : that.userMsg.vCode,
content : that.content
},function(res){
if(res.data.code == 1){
//任务创建成功
that.taskID = res.data.data; //这是创建的任务的ID
//接下来要用这个ID来上传图片文件。
that.uploadPics();
}
//console.log(res);
});
},
uploadPics:function(){
if (this.pics.length < 1) return;
this.cTask_curr = '上传图片...';
this.cTask_picIndex = 1;
var that = this;
this.uploadAPI({
class : "upload",
fun : "pic",
phoneNum : that.userMsg.userPhone,
vCode : that.userMsg.vCode,
taskID : that.taskID,
tempFilePaths : that.pics,
uploadIndex : 0,
},function(res, index){
//每上传完一个图，这里会被调用一次
//console.log("第N个上传完毕：" + index);
that.uploadedPics.push(res.data.data);
if(index+1 == that.pics.length){
that.cTask_curr = '上传完毕。';
that.$refs.popup.close();
}
},function(res, index){
//上传进度改变，会调用这里。
that.cTask_picIndex = index+1;
that.cTask_picSize = res.totalBytesExpectedToSend;
that.cTask_picUpSize = res.totalBytesSent;
that.cTask_progress = res.progress;
// console.log('第几个' + index);
// console.log('上传进度' + res.progress);
// console.log('已经上传的数据长度' + res.totalBytesSent);
// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
});
}
}
}
</script>下面是API端接收文件的代码API：upload/pic
<?php
/**
* 在和API主目录同一级目录下的uploads目录下存储上传的图片文件
文件名是当前日期时间和四位随机数（为的是有人同时上传图片时不会重名）
*/
if (checkUserPhoneAndVCode() == true){
//上传根目录，用四次dirname是我不想用../，dirname可以剥离一级文件/文件夹，注意结尾没有/
//这里的__FILE__是常量，它永远代表了当前文件的包含路径的全名
$uploaddir = dirname(dirname(dirname(dirname(__FILE__))))."/uploads/";
$urlDir = "/uploads/"; //前端显示的路径，这个是根据主机根目录来显示的
$userMsg = getUserInfo(POST("phoneNum")); //这一步永远不会出错，不用考虑容错
$cDir = $userMsg['users_groupID'] . "/"; //把组ID拼接进去，这样每个物业单独用一个目录
$cDir = $cDir . $userMsg['users_ID'] . "/"; //再把用户ID拼进去，这样每个用户发的图单独一个目录
$cDir = $cDir . POST("taskID") . "/"; //把任务ID拼接进去
$uploaddir .= $cDir;
$urlDir .= $cDir;
//文件名，当前日期时间加四位随机数
//因为移动设备传过来的文件名基本都不可用，所以要自定义文件名
$baseName = date("YmdHis") . rand(1000,9999);
//连接上扩展名
$fileNamePath = $uploaddir . $baseName . '.' .pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
$fileUrl = $urlDir . $baseName . '.' .pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
if(!is_dir($uploaddir)){ //路径是否存在
//如果存在，就创建这个目录
mkdir($uploaddir,0777,true);
}
if (move_uploaded_file($_FILES['file']['tmp_name'], $fileNamePath)) {
output2Die("上传成功。",1, $fileUrl); //成功，返回文件的url
} else {
output2Die("上传失败，也不知道啥原因呢。", -1, $fileNamePath);
}
}
output2Die("没有上传权限", -2);
测试运行一下：
然后再去FTP上看上传的文件（文件在/uploads/组ID/用户ID/taskID下）
这里有一点要说明一下。
在逻辑中，我们并没有把上传的图片文件存到数据库对应的任务记录下面。这也是我突发奇想的一个点子，因为根据组和任务创建者ID，我们可以拼出一个完整的文件夹路径，我们直接在这个路径下遍历文件就行了，嗯，暂时先这样，如果用着不爽，大不了再在数据库里加一个字段而已。
（我在写这篇文章时，添加最后一张图时火狐会闪退，唉。）
下一篇该做用列表显示出任务来了，敬请期待。