微信小程序之七牛云实现多张图片上传效果

最新推荐文章于 2024-05-08 10:43:57 发布

前端阿龙

最新推荐文章于 2024-05-08 10:43:57 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_42790916/article/details/82740699

小程序专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个小程序中实现从相册选择图片并上传到七牛云的过程。通过wx.chooseImage选择图片后，利用七牛云提供的JS SDK进行上传，并将上传后的图片链接保存到小程序的数据中以供后续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Page({

  /**
   * 页面的初始数据
   */
  data: {
    temp:[],
    changColor: false,
    sendFlag: false,
    pencilimg: "../../../assets/img/pencil.png",
    tempFilePaths: [],
    tempFilepath:"../../../assets/img/camera.png",
    noterecord: ["所有人", "好友可见", "仅自己可见"],
    addsite: "添加地点"
  },
  album: function() {
    var _this = this
    wx.chooseImage({
      count: 9, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有  
      success: function(res) {
        // const tempFilePaths = res.tempFilePaths
        const filepath = res.tempFilePaths[0]
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片    
        qiniuUploader.upload(filepath, res => {
        //七牛云js中封装的方法 成功的话就把链接push给data中的空数组
         _this.data.tempFilePaths.push(app.globalData.urlst + "/" + res.key)
          if (_this.data.tempFilePaths.length>1){
            _this.setData({
            
             //当push进去的链接大于一个时 就在底下显示缩略图 
              temp: _this.data.tempFilePaths
            })
          }
          _this.setData({
            tempFilePath:app.globalData.urlst +"/"+ res.key
          })
          console.log(_this.data.tempFilePath)
        }, (error) => {
          console.log('error' + error)
        }, {
          uploadURL: 'https://up-z1.qbox.me/',

          domain: 'bzkdlkaf.bkt.clouddn.com',

          uptoken: _this.data.uploadToken,
        })
      }
    })
  },

这里面值得注意的是要在data中设置两个空数组供其使用