小程序使用小白接口上传图片方法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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

处理图片与请求服务（使用小程序的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);
    
          },
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110