微信小程序圖片上傳使用整理（二）

1、小程序圖片上傳示例2

選擇圖片，先預覽，點擊提交時上傳

1.wxml

<button type='primary' plain='true' bindtap='getImg'>
  選擇圖片
</button>

<image src='{{imgpath}}'></image>

<button type='warn' plain='true' bindtap='uploadImg'>
  肯定上傳
</button>

2.js 處理

/**
   * 頁面的初始數據
   */
  data: {
    imgpath: '',
  },
  getImg: function () {
    var _this = this;
    //選擇圖片
    wx.chooseImage({
      success: function (res) {
        //預覽顯示
        _this.setData({
          imgpath: res.tempFilePaths[0]
        });
      },
    })
  },
  uploadImg: function () {
    var _this = this;
    console.info(_this.data);
    //上傳處理
    wx.uploadFile({
      url: 'http://localhost:63588/ashx/upload_form.ashx', //上傳地址
      filePath: _this.data.imgpath,//上傳圖片路徑
      name:'file',
      success: res => {
       console.info(res);
      }
    })

  },

2、上傳示例3，前臺圖片壓縮處理後，再上傳

1.wxml

<button bindtap='getImg'>
  選擇圖片，壓縮後上傳
</button>

<canvas canvas-id='canvas1' style='width:{{imgwidth}}px;height:{{imgheight}}px;'>
</canvas>

2.重點js 處理

//選擇圖片
  getImg: function () {
    var _this = this;
    var ctx = wx.createCanvasContext('canvas1', this);
    //選擇圖片
    wx.chooseImage({
      success: function (res) {
        //圖片預覽壓縮處理  ---指定圖片最大寬度縮放
        var imgPath = res.tempFilePaths[0];
        var maxWidth = 100;

        wx.getImageInfo({
          src: imgPath,
          success: res => {
            _this.setData({
              imgwidth: res.width,
              imgheight: res.height
            });

            //繪製處理 (比例不變，最大寬度高度爲100)
            var width = 100, height = 100;
            if (res.width > res.height) {
              width = maxWidth;
              height = res.height / res.width * maxWidth;

            } else {
              height = maxWidth;
              width = res.width / res.height * maxWidth;
            }
            ctx.drawImage(imgPath, 0, 0, res.width, res.height);
            ctx.draw(true, function () {

              //導出圖片爲臨時文件，而後上傳
              wx.canvasToTempFilePath({
                canvasId: 'canvas1',
                fileType: 'jpg',
                destWidth: width,
                destHeight: height,
                success: res => {
                  console.info(res.tempFilePath);
                  //上傳
                  wx.uploadFile({
                    url: 'http://localhost:63588/ashx/upload_form.ashx',
                    filePath: res.tempFilePath,
                    name: 'file',
                    success: res => {
                      wx.showModal({
                        title: '提示',
                        content: '上傳成功',
                      })
                    }
                  })
                }
              }, this);

            });

          }
        })

      },
    })
  },

更多：

微信小程序圖片上傳使用整理（一）

小程序如何刪除或隱藏頭部導航欄，實現全屏

微信小程序富文本圖片處理二