小程序使用小白接口上傳圖片方法1

小白接口：https://www.yesapi.cn/

---

1. 使用的小白接口:App.CDN.UploadImg

鏈接：http://api.okayapi.com/?s=App.CDN.UploadImg

• 先再小程序的微信公衆平臺上設置小白域名爲合法域名
• 使用這個接口時，先手動在小白後臺取消App.CDN.UploadImg的簽名設置。
• 這邊的數據參數以formData上傳， 使用post方式請求接口
• 如果感覺不太安全可以使用方法2

2. 小程序樣例代碼

頁面的佈局（添加圖片就可以上傳）：

    <view class="weui-uploader">
    
      <view class="weui-uploader__hd">
        <view class="weui-uploader__title">圖片上傳</view>
      </view>
    
      <view class="weui-uploader__bd">
        <block wx:for="{{imagesList}}" wx:key="*this" >
          <view class="weui-uploader__file">
            <image class="weui-uploader__img" src="{{item}}"></image>
          </view>
        </block>
    
        <view class="weui-uploader__input-box">
          <input class="weui-uploader__input js_file" type="file"
                 accept="image/jpg,image/jpeg,image/png,image/gif"
                 multiple="" bindtap='uploader' name="images"></input>
        </view>
      </view>
    
    </view>

處理圖片與請求服務（使用小程序的API：uploadFile）

請求成功返回七牛雲鏈接

    wx.chooseImage({
    
          count: 6, //最多可以選擇的圖片總數
    
          sizeType: ['original','compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
    
          sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
    
          success: function(res) {
    
            wx.showToast({
    
              title: '正在上傳...',
    
              icon: 'loading',
    
              mask: true,
    
              duration: 500
    
            })
    
            for(let i=0;i<res.tempFiles.length;i++){
    
              if(res.tempFiles[i].size>maxSize){
    
                flag=false;
    
                wx.showModal({
    
                  content: '圖片太大，不允許上傳',
    
                  showCancel: false,
    
                  success: function (res) {
    
                    if (res.confirm) {
    
                      console.log('用戶點擊確定')
    
                    }
    
                  }
    
                });
    
              }
    
            }
    
            const tempFilePaths = res.tempFilePaths[0]
    
            if (res.tempFiles.length>maxLength){
    	          wx.showModal({
    
    		            content: '最多能上傳'+maxLength+'張圖片',
    
    		            showCancel:false,
    
    		            success:function(res){
    		
    		              if(res.confirm){
    		                console.log('確定');
    		              }
    		            }
    
              })
    
            }
    
            if (flag == true && res.tempFiles.length <= maxLength){
    
              that.setData({
    
                imagesList: res.tempFilePaths
    
              })
    
            }
    
    
    				//請求接口
    
            wx.uploadFile({
    
              url: getApp().globalData.okayapiHost,
    
              filePath: tempFilePaths,
    
              name: 'file',
    
              header: {
    
                "Content-Type": "application/x-www-form-urlencoded"
    
              },
    
              formData: {
                file_name : 'Camaro.png',
                app_key : 'your appkey',
    						s:"App.CDN.UploadImg"
    
              },
    
            })
    
            console.log(res);
    
          },
        })