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