小程序使用小白接口上传图片方法1

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

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

• 先在小程序的微信公众平台上设置小白域名为合法域名（小白接口免费给域名，服务器 https://www.yesapi.cn/docs/#/v2.0/client?id=微信小程序接入示例 并且可免费上传图片哦！）
• 使用这个接口时，先手动在小白后台取消App.CDN.UploadImg的签名设置。
• 这边的数据参数以formData上传， 使用post方式请求接口

2. 小程序样例代码

wxml（添加图片就可以上传）：

<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);

      },
    })