vue 上傳文件到 阿里雲OSS，並獲取上傳進度

1.首先，安裝阿里的包

npm install ali-oss

初始化一下配置，傳的參數data從後臺獲取

const OSS = require('ali-oss')

export function client(data) {
    //後端提供數據
  return new OSS({
    region: data.region,  //oss-cn-shenzhen.aliyuncs.com
    accessKeyId: data.accessKeyId,
    accessKeySecret: data.accessKeySecret,
    bucket: data.bucket
  })
}

2.使用element-ui的Upload作爲上傳組件，http-request 來綁定自定義上傳的方法Upload，action寫爲空。 :before-upload="beforeUpload" 表示在上傳前做的事情，綁定了方法beforeUpload，我們可以在這個方法裏獲取所需要的一些信息，比如簽名等等

<el-upload
      :http-request="Upload"
      :data="dataObj" 
      :multiple="false"
      :show-file-list="false"
      :before-upload="beforeUpload" //在上傳前做的事情
      class="image-uploader"
      drag
      action=""
    >
      <i class="el-icon-upload"/>
      <div class="el-upload__text">將圖片拖到此處，或<em>點擊上傳</em></div>
    </el-upload>

data 例子如下

data() {
      return {
        tempUrl: '', //存上傳後的圖片url
        dataObj: {}, //存簽名信息
        baseAli: 'oss-cn-shenzhen.aliyuncs.com', //後面連接圖片url用的，根據自己aili OSS 配製修改
      progress:0//進度條
      }
    },

3.methods
從後臺獲取第一步所需的數據

  beforeUpload() {
        return new Promise((resolve, reject) => {
//從後臺獲取第一步所需的數據
          getAliToken().then(response => {
            this.dataObj = response.data
            resolve(true)
          }).catch(err => {
            console.log(err)
            reject(false)
          })
        })
      },

上傳方法

Upload(file) {
        const that = this
        //判斷擴展名
        const tmpcnt = file.file.name.lastIndexOf(".")
        const exname = file.file.name.substring(tmpcnt + 1)
        const names = ['jpg', 'jpeg', 'webp', 'png','bmp']
        if(names.indexOf(exname)< 0 ){
          this.$message.error("不支持的格式!")
          return
        }
        async function multipartUpload () {

          const fileName = that.name + file.file.uid
          //定義唯一的文件名，打印出來的uid其實就是時間戳
          //client 是第一步中的 client
          client(that.dataObj).multipartUpload(fileName, file.file,
            {
              progress:function (p) { //獲取進度條的值
                console.log(p)
                that.progress = p*100
              },

            }).then(
            result => {
              //下面是如果對返回結果再進行處理，根據項目需要
              // console.log(result)
              that.tempUrl = 'http://'+result.bucket+'.'+that.baseAli+ '/' + result.name

            }).catch(err => {
            console.log("err:",err)
          })
        }
        multipartUpload ()


      },

至此，上傳完成