//多张图片上传(上传按钮)
uploadimgs: function (data) {
uploading = true;
//上传图片中去掉包含有已上传的图片
// [另一种方法,用splice删除项会影响数组长度,则原来的的数组长度用一个新的变量来遍历]
for (var j = 0; j < data.path.length; j++) {
if (data.path[j].indexOf("WJ100011") != -1){ //已上传过的文件夹名 区分本地和上传过的文件
delete data.path[j]; //不会影响数组长度
}
}
//对数组进行去掉因为使用delete不改变数组,而去掉undefined项再上传
var dataIndex = data.path.length ;
if(dataIndex>0){
do {
dataIndex--;
if (data.path[dataIndex] === "undefined" || data.path[dataIndex] == undefined) {
data.path.splice(dataIndex, 1);
}
} while (dataIndex > 0);
}
console.log(data.path);
var that = this,
i = data.i ? data.i : 0,//当前上传的哪张图片
success = data.success ? data.success : 0,//上传成功的个数
fail = data.fail ? data.fail : 0,//上传失败的个数
obj = {};
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'file',//这里根据自己的实际情况改
formData: {
'WJJ': 'WJ100011',
'Method': 'B',
'format': '退货单打印' + that.data.DocEntry,
},//这里是上传图片时一起上传的数据
success: (resp) => {
const d = JSON.parse(resp.data),
pic = JSON.parse(d.Message)
if (d.Status == 200) {
obj = {};
success++;//图片上传成功,图片上传成功的变量+1;
obj = {
Key: pic.Key,
Value: pic.Value,
}
uploadImageList.push(obj);
if (success == data.path.length) {
that.uptoServer(uploadImageList)
}
} else { //上传返回不是200的时候
wx.showModal({
title: "错误信息",
content: res.data.Message,
showCancel: false,
})
}
},
fail: (res) => {
fail++;//图片上传失败,图片上传失败的变量+1
},
complete: () => {
i++;//这个图片执行完上传后,开始上传下一张
if (i == data.path.length) { //当图片传完时,停止调用
} else {//若图片还没有传完,则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimgs(data);
}
}
});
},
//上传图片到服务器
uptoServer: function (image,flag) {
var that = this;
var imageItems = image
var str = "";
var op = ";";
console.log("image",image)
for (var i = 0; i < imageItems.length; i++) {
//最后一项不用加op
if (i == imageItems.length - 1) {
op = "";
}
if(!imageItems[i].Value){
//当只上传本地的图片时,并无添加新的图片
str += imageItems[i].substr(30) + op;
}else{
//上传新的图片时
str += imageItems[i].Value + op;
}
}
console.log("合并后",str)
console.log("已上传过的",tempUpedArray)
var newstr = [];
//已上传过的图片并存在本地新添加的图片,需要把已上传过的和本地新图片合并,加上分隔符
if(tempUpedArray.length && !flag){
var newop=";";
for (var i = 0; i < tempUpedArray.length; i++) {
newstr = newop + tempUpedArray[i].substr(30);
str = str.concat(newstr)
}
}
var pdata = {
Content: {
"Img_Url": str,
},
"Tonken": XXXX,
"Method": "X",
}
console.log(JSON.stringify(pdata))
wx.request({
url: "",
data: pdata,
method: 'POST',
header: {
'content-type': 'application/json'
},
success: function (res) {
wx.hideLoading();
if (res.data.Status == 200) {
uploading = false;
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 1300,
})
//成功
} else {
wx.showModal({
title: "错误信息",
content: res.data.Message,
showCancel: false,
})
}
},
fail: function () {
wx.hideLoading();
wx.showModal({
title: "网络错误",
content: JSON.stringify(arguments),
success: function () {
}
})
},
})
},
//这里是选取图片的方法(添加图片按钮)
choose: function () {
var that = this,
pics = this.data.imageList;
wx.chooseImage({
count: 9 - pics.length, // 最多可以选择的图片张数,默认9
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function (res) {
var imgsrc = res.tempFilePaths;
pics = pics.concat(imgsrc);
that.setData({
imageList: pics
});
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
//上传按钮
uploadimg: function () {//这里触发图片上传的方法
var that = this,
pics = this.data.imageList;
if (!pics.length) {
return;
}
var tempLocalpics = [];//本地新添加图片数组
tempUpedArray = [];//已上传过的图片数组
//把已上传过的,本地新添加的分为两个数组
for (var i = 0; i < pics.length; i++) {
if (pics[i].indexOf("UploadFiles") != -1) {
tempUpedArray = tempUpedArray.concat(pics[i]);
}else{
tempLocalpics = tempLocalpics.concat(pics[i]);
}
}
wx.showLoading({
title: '正在加载...',
mask: true,
})
if (tempLocalpics.length){
that.uploadimgs({
url: "",//上传图片的接口
path: [...tempLocalpics]//这里是选取的图片的地址数组
});
}else{
//没有添加新图片的时候
that.uptoServer(tempUpedArray,1);
}
},
previewImage(e) {
var that = this;
const current = e.target.dataset.src; //
wx.previewImage({
current, //当前显示图片的链接
urls: that.data.imageList,
})
},
//删除图片
delImage: function (e) {
if (uploading) {//正在上传,不能删除
return;
}
var pics = this.data.imageList;
let index = e.currentTarget.dataset.index;
pics.splice(index, 1);
this.setData({
imageList: pics
});
}
微信小程序上传多张图片
于 2019-10-06 09:25:48 首次发布