微信小程序上传图片

痛定思痛。 2021-09-17 03:02 543阅读 0赞

//添加图片
      joinPicture: function (e) {
        var index = e.currentTarget.dataset.index;
        var evalList = this.data.evalList;
        var that = this;
        var imgNumber = evalList[index].tempFilePaths;
        if (imgNumber.length >= 3) {
          wx.showModal({
            title: '',
            content: '最多上传三张图片',
            showCancel: false,
          })
          return;
        }
        wx.showActionSheet({
          itemList: ["从相册中选择", "拍照"],
          itemColor: "#f7982a",
          success: function (res) {
            if (!res.cancel) {
              if (res.tapIndex == 0) {
                that.chooseWxImage("album", imgNumber);
              } else if (res.tapIndex == 1) {
                that.chooseWxImage("camera", imgNumber);
              }
            }
          }
        })
      },
      chooseWxImage: function (type, list) {
        var img = list;
        var len = img.length;
        var that = this;
        var evalList = this.data.evalList;
        wx.chooseImage({
          count: 3,
          sizeType: ["original", "compressed"],
          sourceType: [type],
          success: function (res) {
            var addImg = res.tempFilePaths;
            var addLen = addImg.length;
            if ((len + addLen) > 3) {
              for (var i = 0; i < (addLen - len); i++) {
                var str = {};
                str.pic = addImg[i];
                img.push(str);
              }
            } else {
              for (var j = 0; j < addLen; j++) {
                var str = {};
                str.pic = addImg[j];
                img.push(str);
              }
            }
            that.setData({
              evalList: evalList
            })
            that.upLoadImg(img);
          },
        })
      },
      upLoadImg: function (list) {
        var that = this;
        this.upload(that, list);
      },
      //多张图片上传
      upload: function (page, path) {
        var that = this;
        var curImgList = [];
        for (var i = 0; i < path.length; i++) {
          wx.showToast({
            icon: "loading",
            title: "正在上传"
          }),
            wx.uploadFile({
              url: app.globalData.subDomain + '/API/AppletApi.aspx',//接口处理在下面有写
              filePath: path[i].pic,
              name: 'file',
              header: { "Content-Type": "multipart/form-data" },
              formData: {
                douploadpic: '1'
              },
              success: function (res) {
                curImgList.push(res.data);
                var evalList = that.data.evalList;
                evalList[0].imgList = curImgList;
                that.setData({
                  evalList: evalList
                })
                if (res.statusCode != 200) {
                  wx.showModal({
                    title: '提示',
                    content: '上传失败',
                    showCancel: false
                  })
                  return;
                }
                var data = res.data
                page.setData({  //上传成功修改显示头像
                  src: path[0]
                })
              },
              fail: function (e) {
                wx.showModal({
                  title: '提示',
                  content: '上传失败',
                  showCancel: false
                })
              },
              complete: function () {
                wx.hideToast();  //隐藏Toast
              }
            })
        }
      },
      //删除图片
      clearImg: function (e) {
        var index = e.currentTarget.dataset.index;
        var evalList = this.data.evalList;
        var img = evalList[0].tempFilePaths;
        img.splice(index, 1);
        this.setData({
          evalList: evalList
        })
        this.upLoadImg(img);
      },

data: {
      productInfo: {}
    },
    //上传图片
    uploadImage: function () {
      var that = this;
     
      wx.chooseImage({
        count: 1,  //最多可以选择的图片总数
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths;
          //启动上传等待中...
          wx.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true,
            duration: 10000
          })
     
            wx.uploadFile({
              url: '192.168.1.1/home/uploadfilenew',
              filePath: tempFilePaths[0],
              name: 'uploadfile_ant',
              formData: {
              },
              header: {
                "Content-Type": "multipart/form-data"
              },
              success: function (res) {
                var data = JSON.parse(res.data);
                //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
                console.log(data);
              },
              fail: function (res) {
                wx.hideToast();
                wx.showModal({
                  title: '错误提示',
                  content: '上传图片失败',
                  showCancel: false,
                  success: function (res) { }
                })
              }
            });
        }
      });
    }