vue iview前端直接上传OSS

1. 首先安装oss

npm install ali-oss --save

2.

// template部分
  <Upload
      ref="upload"
      type="drag"
      :default-file-list="file"
      action=""
      :before-upload="handleBeforeUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :accept="accept"
      with-credentials>
      <div style="padding: 20px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖拽上传文件</p>
      </div>
    </Upload>
    <Progress :percent="uploadPercent" v-if="isPercent"/>

3. script部分

<script>
export deault {
   data () {
       return {
        file: [],
        accept: 'video/*',
        ossConfig: {},
        ossInfo: {},
        isPercent: false,
        uploadPercent: 0,
        format:[],
        maxSize: 1 * 1024 * 1024
      }
    },
    methods: {
       // 获取上传凭证
    async getUploadToken () {
    //  通过后端接口获取上传基本信息
      const res = await getUploadInfo(params)
      this.ossConfig = {
        region: res.data.region_id,
        accessKeyId: res.data.AccessKeyId,
        accessKeySecret: res.data.AccessKeySecret,
        stsToken: res.data.SecurityToken,
        bucket: res.data.bucket,
        secure: true
      }
      this.ossInfo = {
        Expiration: res.data.Expiration,
        dir: res.data.dir,
        domain: res.data.domain,
        filename: res.data.filename
      }
    },
     // 定义上传方法。
    async multipartUpload (filename, file) {
      try {
        const result = await
this.client.multipartUpload(`${this.ossInfo.dir}${this.ossInfo.filename}.${this.fileSuffix}`, file, {
          headers: {
            'Content-Disposition': 'inline',
            'Content-Type': this.fileType
          },
          progress: (p, checkpoint) => {
            this.isPercent = true
            this.uploadPercent = Number((p * 100).toFixed(2))
            // checkpoint参数用于记录上传进度，断点续传上传时将记录的checkpoint参数传入即可。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
            this.tempPoint = checkpoint
          },
          parallel: 10,
          // 设置分片大小 默认是1M,这里设置5M
          partSize: 1024 * 1024 * 5,
          mime: this.fileType
        })
        if (result.res.statusCode !== 200) {
          this.$Message.error('文件上传失败')
          return false
        }
        this.file = [
          {
            name: this.fileName,
            url: this.ossInfo.domain + result.name
          }
        ]
        this.$Message.success(`文件上传成功`)
        this.isPercent = false
      } catch (e) {
        this.$Message.error('文件上传失败')
        this.isPercent = false
      }
    },
 // 上传前处理
    handleBeforeUpload (file, fileList) {
      this.fileSuffix = file.name.split('.').pop()
      this.fileName = file.name
      this.fileType = file.type
      if (!this.format.includes(this.fileSuffix)) {
        this.$Message.error(`上传文件仅支持${this.format.toString()}格式`)
        return false
      }
      if (file.size > this.maxSize) {
        this.$Message.error(`当前上传文件最大不能超过100M`)
        return false
      }
      this.client = new OSS(this.ossConfig)
      this.multipartUpload(file.name, file)
      return false
    },
}
}

</script>