微信小程序图片上传到七牛云具体代码实现

1.首先下载七牛云.js 在需要上传图片的js中文件中引入

const qiniuUploader = require("../../../utils/qiniuUploader.js");

然后就在onload函数中写请求 跟后段的接口对接

wx.request({
      url: app.globalData.urls + "/wxchat/upload/upload_token",
      method: "POST",
      header: {
        "content-type": "application/x-www-form-urlencoded",
        'content-type': 'application/json' // 默认值
      },
      success: res => {
        console.log(res)
        const uploadToken = res.data.token
        this.setData({
          uploadToken: uploadToken
        })
      }
    })

3.在微信小程序自带的图片功能中实现图片上传七牛云

  album: function() {
    var _this = this
    wx.chooseImage({
      count: 4, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有  
      sourceType: ['album'], // 可以指定来源是相册还是相机,默认二者都有  
      success: function(res) {
        console.log(qiniuUploader)
        console.log(qiniuUploader.unload)
        const filepath = res.tempFilePaths[0]
        console.log(filepath)
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片  
        qiniuUploader.upload(filepath, res => {
          console.log(res)
          _this.setData({
          //注意这中间有个"/"在这上面耽误了半个小时
            tempFilePaths:app.globalData.urlst +"/"+ res.key
          })
          console.log(_this.data.tempFilePaths)
        }, (error) => {
          console.log('error' + error)
        }, {
        //这里是你所在大区的地址
          uploadURL: 'https://up-z1.qbox.me/',

          domain: 'bzkdlkaf.bkt.clouddn.com',
//这里的uptoken是后端返回来的
          uptoken: _this.data.uploadToken,
        })
      }
    })
  }

猜你喜欢

转载自blog.csdn.net/weixin_42790916/article/details/82705722
今日推荐