微信小程序上传多张图片

//多张图片上传(上传按钮)

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

    });

}