Vue 将本地图片上传到阿里云

一、获取服务器通行证(即获取AccessKey和accessKeySecret)

    getAccess () {
        let that = this
        let url = '服务器地址'
        let params = {
          type: 'K'
        }
        // 第一步:获取AccessKey
        this.$api.send(url, params).then((response) => {
          if (response.status === 200) {
            that.accessKey = response.body.data.data.Credentials
            /* global OSS */
            that.client = new OSS.Wrapper({
              region: 'oss-cn-shenzhen',
              bucket: '阿里云bucket文件夹名',
              accessKeyId: that.accessKey.AccessKeyId,
              accessKeySecret: that.accessKey.AccessKeySecret,
              stsToken: that.accessKey.SecurityToken
            })
            that.folder = response.body.data.data.folder;
            for (let i = 0; i < that.allList.length; i++) {
              if (!that.allList[i].hasUpload) {//allList 需要上传的图片数组
(function () { that.uploadItem(that.allList[i], i) })(i) } } } }) }

二、上传到服务器

      uploadItem (file, index) {
        let that = this
        let progress = function (p) {
          return function (done) {
            done()
          }
        }
        // 命名规则:web+id+10位时间戳+随机4位数
        let storeAs = 'web' + that.$user.getAll().userId + Math.round(new Date().getTime() / 1000) + Math.ceil(Math.random() * 100000).toString() + '.' + file.name.split('.')[1]
        // 第二步:调用阿里云上传函数上传文件
        this.client.multipartUpload(this.folder + '/' + storeAs, file.obj, {
          progress: progress
        }).then(function (result) {
          alert(上传成功)
        }).catch(function (err) {
          console.log(err)
        })
      }
 this.getUnloadImg()

  

猜你喜欢

转载自www.cnblogs.com/candy-Yao/p/9182571.html