美文网首页
微信小程序 上传图片到腾讯云Promise.all 多图上传

微信小程序 上传图片到腾讯云Promise.all 多图上传

作者: 我讲你思 | 来源:发表于2021-02-07 17:10 被阅读0次

    微信小程序 上传图片到腾讯云 Promise.all 多图上传

    const host = 'https://****'
    const COS = require('./cos-wx-sdk-v5')
    const alert = (title) =>{
      wx.showToast({
        title: title,
        icon: 'none'
      })
    }
    
    const getRequestOptions = options => {
      const url = host + options.url
      const header = {
        api_token: wx.getStorageSync('api_token'),
        "Content-Type": "application/json"
      }
      options.url = host + options.url
      options.loading === false ? null : typeof options.loading === 'string' ? wx.showLoading({
        title: loading,
      }): wx.showLoading({
          title: '请稍后...',
        })
      return Object.assign(options, { url, header });
    }
    
    
    const get = options => {
      options.method = 'get'
      return new Promise((resolve, reject)=>{
        request(getRequestOptions(options), resolve, reject)
      })
    }
    
    const post = options => {
      options.method = 'post'
      return new Promise((resolve, reject)=>{
        request(getRequestOptions(options), resolve, reject)
      })
    }
    
    const request = (options, resolve, reject) => {
      options.data = options.data || {}
      options.data.api_token = wx.getStorageSync('api_token'),
        wx.request({
          ...options,
          success: (res) => {
            wx.hideLoading()
            wx.stopPullDownRefresh()
            const data = res.data
            if (data.status == 1) {
              wx.setStorageSync('isLoginPage', false)
              resolve(data)
            } else if (data.status == 400) {
              wx.setStorageSync('isLoginPage', false)
              alert('数据不存在')
            } else if (data.status == 401) {
              alert('没有权限')
              const isLoginPage = wx.getStorageSync('isLoginPage')
              if (isLoginPage) return;
              setTimeout(_ => {
                wx.setStorageSync('isLoginPage', true)
                wx.redirectTo({
                  url: '/pages/login/login',
                })
                wx.setStorageSync('isLoginPage', false)
              }, 2000)
            } else {
              alert(data.message || '请求错误')
            }
          },
          fail: (error) => {
            wx.hideLoading()
            wx.stopPullDownRefresh()
            alert(JSON.stringify(error))
            reject(error)
          }
        })
    }
    
    // 使用promise.all 实现多图上传 
    // 获取 腾讯云签名,由后端返回
    const getUploadSign = () => {
      return new Promise((resolve, reject) => {
        get({
          url: '***',
          loading: false,
        }).then(res => {
          resolve(res.data[0])
        })
      }) 
    }
    
    // 设置腾讯云上传参数
    const setCosConfig = res => {
      return new COS({
        // ForcePathStyle: true, 
        getAuthorization: function (options, callback) {
          callback({
            TmpSecretId: res.tmpSecretId,
            TmpSecretKey: res.tmpSecretKey,
            XCosSecurityToken: res.sessionToken,
            StartTime: res.startTime, 
            ExpiredTime: res.expiredTime, 
          });
        }
      });
    } 
    
    
    const upload = imageList => {
      imageList = Array.isArray(imageList) ? imageList : [imageList]
      wx.showLoading({
        title: '上传图片中...',
        mask:true
      });
      
      return new Promise((Presolve, Preject) => {
        getUploadSign().then(res => {
          const cos = setCosConfig(res)
          let promiseList = []
          imageList.forEach(item => {
            const filePath = item.path;
            promiseList.push( 
              new Promise((resolve, reject)=>{
                cos.postObject({
                  Bucket: res.bucket,
                  Region: res.region,
                  Key: filename.substring(filename.length-8),
                  FilePath: filePath,
                }, function (err, data) {
                  resolve( '//' + data.Location)
                });
              })
            )
          })
          // 使用Promise.all进行多图上传
          Promise.all(promiseList).then(res => {
            Presolve(res)
          }).catch((error) => {
            wx.hideLoading()
            wx.showToast({
              title:'上传失败请重试',
              icon:'none'
            })
            Preject(error)
            console.log(error);
          });
        })
      })  
     
    }
    
    
    
    
    wx.$get = get
    wx.$post = post
    wx.$upload = upload
    
    wx.$alert = alert
    
    
    

    其他请参考:https://www.jianshu.com/p/72621a4e06c2

    相关文章

      网友评论

          本文标题:微信小程序 上传图片到腾讯云Promise.all 多图上传

          本文链接:https://www.haomeiwen.com/subject/rwiztltx.html