1. 程式人生 > >小程式上傳圖片

小程式上傳圖片

  data: {
    evalList: [{ tempFilePaths: [], imgList: [] }]
  },
//新增圖片
  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);
  },
 //提交發布
  submitClick: function (e) {
      var evalList = that.data.evalList;
      var imgList = evalList[0].imgList;
      var imgPort = "";//圖片地址,多張以逗號分割
      if (imgList.length != 0) {
        for (var j = 0; j < imgList.length; j++) {
          imgPort = imgList[j] + "," + imgPort;
        }
      } else {
        imgPort = "";
      }
  },
 小程式前端處理
<view class="educt_hasupload_pic" wx:for="{{evalList[0].tempFilePaths}}"  wx:key="index">
              <image src="{{item.pic}}" class="upload"></image>
              <image src="../../images/deltel.png" bindtap='clearImg' data-index="{{index}}" class="deltel"></image>
          </view>
          <view class="educt_upload_add" bindtap="joinPicture" data-index="{{0}}">
              <image src="../../images/add.png"></image>
          </view>
 /// <summary>
        /// 上傳圖片或檔案介面處理
        /// </summary>
        private void douploadfile()
        {
            string ret = "";
            try
            {
System.Web.HttpFileCollection flist = Request.Files;
                //如果集合的數量大於0
                if (flist.Count > 0)
                {
                    foreach (string str in flist)
                    {
                        HttpPostedFile FileSave = flist[str];  //用key獲取單個檔案物件HttpPostedFile

                        //在檔名前面加上時間,以防重名
                        string imgName = DateTime.Now.ToString("yyMMddHHmmssfffff") + FileSave.FileName;
                        //檔案儲存相對於當前應用目錄的虛擬目錄
                        string path = "/upload/image/";
                        //獲取相對於應用的基目錄,建立目錄
                        string imgPath = System.AppDomain.CurrentDomain.BaseDirectory + path;     //通過此物件獲取檔名
                        StringHelper.CreateDirectory(imgPath);
                        //檔案儲存的目錄和名稱
                        string filepath = imgPath + imgName;
                        FileSave.SaveAs(filepath);
                        ret += 網址+ path + imgName;//圖片地址,包括http
                    }
                }
            }
            catch (Exception e)
            {
                Response.Write(e.Message);
            }
            Response.Write(ret);
        }
效果如下圖: