小程序上传图片方法1(免搭建上传到小白接口免费服务器)

小程序使用小白接口上传图片方法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(添加图片就可以上传):



  
    图片上传
  

  
    
      
        
      
    

    
      
    
  


小程序上传图片方法1(免搭建上传到小白接口免费服务器)_第1张图片

处理图片与请求服务(使用小程序的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;imaxSize){

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

      },
    })

已经上传完成

你可能感兴趣的:(小程序)