需求
一次最多选择9张,多张图片递归上传。
思路
- 选择完图片,以递归的方式通过wx.uploadFile上传图片。
- 回显缩略图。
代码实现
步骤一
上传组件中的uploadOneByOne方法传入选择的图片列表,一张张的通过wx.uploadFile上传到微信服务器。
/**
* 附件上传
*/
onUpload: function () {
let currentPage = this;
wx.chooseMedia({
count: 9,
mediaType: ["image"],
sourceType: ["album", "camera"],
sizeType: ["compressed"],
camera: "back",
success(res) {
for (let i = 0; i < res.tempFiles.length; i++) {
const item = res.tempFiles[i];
if (item.size == 0 || item.size > 30000000) {
ui.showToast("上传文件大小超过限制", 1000, "none");
return;
}
}
let successUp = 0; //成功
let failUp = 0; //失败
let count = 0; //第几张
let length = res.tempFiles.length; //总数
let list = [];
currentPage.uploadOneByOne(
res.tempFiles,
list,
successUp,
failUp,
count,
length
);
},
});
},
/**
* 附件删除
*/
onDelete: function (e) {
let currentPage = this;
let { index } = e.currentTarget.dataset;
currentPage.triggerEvent("deleteevent", {
onDelete: true,
fileIndex: index,
});
},
/**
* 上传图片:以递归的方式上传
* imgPaths:上传的图片列表
* fileList:上传成功后返回的文件信息
* successUp:上传成功的个数,初始化为0
* failUp:上传失败的个数,初始化为0
* count:第几张
* length:图片列表的长度
*/
uploadOneByOne(imgPaths, fileList, successUp, failUp, count, length) {
let that = this;
let imgPath = imgPaths[count].tempFilePath;
let index = imgPath.lastIndexOf("/");
let filename = imgPath.substring(index + 1, imgPath.length);
let data = new FormData().getData();
wx.uploadFile({
url: `${app.globalData.baseUrl}/file/upload`,
filePath: imgPath,
name: "file",
header: {
Authorization: "Bearer " + that.data.access_token,
"content-type": data.contentType,
},
formData: {
filename: filename,
},
success: function (e) {
// 坑:与wx.request不同的是,upload返回的是字符串格式,需要字符串对象化
const file = JSON.parse(e.data);
if (e.statusCode == 200) {
fileList.push({ onSuccess: true, file: file.data, filename });
successUp++; //成功+1
}
},
fail: function (e) {
console.log(e, "上传失败");
failUp++; //失败+1
},
complete: function (e) {
count++; //下一张
if (count == length) {
//上传完毕,作一下提示
ui.showToast(
`上传成功 ${successUp} 张,失败 ${failUp} 张`,
1000,
"none"
);
that.triggerEvent("successevent", {
onSuccess: true,
files: fileList,
});
} else {
//递归调用,上传下一张
that.uploadOneByOne(
imgPaths,
fileList,
successUp,
failUp,
count,
length
);
}
},
});
},
步骤二
在使用到组件的页面进行附件上传成功、附件删除成功后的回调处理。
上传微信服务器成功后,才开始进行真正的上传服务器操作。这里需要注意要异步请求、异步更新附件信息关联对应的订单类型。
/**
* 附件上传、删除成功后的回调
* 指定索引更新缩略图 未做
*/
updateFile: function (e) {
let currentPage = this;
let { onDelete, onSuccess, fileIndex, files } = e.detail;
let { loscamOrderId } = currentPage.data.form;
let tableType = "pallet_issue";
let list = currentPage.data.fileList;
if (onSuccess) {
for (let i = 0; i < files.length; i++) {
const ele = files[i];
let file = {
...ele.file,
name: ele.filename,
filename: ele.filename,
tableType: tableType,
url: `${app.globalData.baseUrl}/file/downloadfile?fileUrl=${ele.objectId}`,
};
list.push(file);
}
if (loscamOrderId) {
currentPage.updateFileById(tableType, list, loscamOrderId);
} else {
list.forEach((item) => {
item.filetype = item.name.split(".").pop().toLowerCase();
});
currentPage.setData({
fileList: list,
});
}
} else if (onDelete) {
ui.showModal({ title: "确定删除文件?" }, function () {
list.splice(fileIndex, 1);
if (loscamOrderId) {
currentPage.updateFileById(tableType, list, loscamOrderId);
} else {
list.forEach((item) => {
item.filetype = item.name.split(".").pop().toLowerCase();
});
currentPage.setData({
fileList: list,
});
}
});
}
},
updateFileById: function (type, list, id) {
let currentPage = this;
updateFile(list, {
tableType: type,
tableId: id,
}).then(async (res) => {
const data = res.data;
if (data && data.length > 0) {
for (let i = 0; i < list.length; i++) {
const currentIndex = data.findIndex(
(e) => e.objectId == list[i].objectId
);
if (!list[i].fileId) {
let currentId = data[currentIndex].fileId;
currentPage.setData({
["fileList[" + i + "].fileId"]: currentId,
});
}
}
}
await updateFileNum(id, list.length);
await currentPage.initFileList(type, id);
});
},
// 有两种提交订单的方式所以把更新附件提取为一个方法进行调用
updateFileList: function (id) {
let currentPage = this;
if (currentPage.data.loscamOrderId) {
currentPage.updateFileById(
"pallet_issue",
currentPage.data.fileList,
currentPage.data.loscamOrderId
);
}
currentPage.initFileList("pallet_issue", id);
currentPage.backToUpdatePage();
},
步骤三
更新附件信息数据。
/**
* 初始化附件信息
*/
initFileList: function (type, id) {
let currentPage = this;
getFileList(type, id).then((res) => {
let list = res.data;
if (list.length > 0) {
list.forEach((item) => {
item.filetype &&
(item.filetype = item.name.split(".").pop().toLowerCase());
});
}
currentPage.setData({
fileList: list,
});
});
},