vue,通过el-upload,以表单提交的格式将文件上传至阿里云oss

oss上传文件官方入口点这里：上传本地文件
含进度条，选取文件后手动上传。

template：

  <!-- 本地文件上传 -->
  <el-upload
    v-if="form.dataFrom === '0'"
    ref="upload"
    action="#"
    accept=".mp4,.ts,.MP3,.AAC" //限制上传的格式
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :auto-upload="false"
    :limit="1"
    :multiple="false"
    :on-exceed="handleExceed"
    :http-request="upLoadFile"
  >
    <div
      slot="trigger" //触发文件选择框的内容
      class="upload"
    >
      <el-input
        v-model="form.dataFormInputData"
        placeholder="请选择文件"
      />
    </div>
  </el-upload>
  
   <!-- 进度条部分 -->
  <div
    v-if="progressFlag"
    class="el_progress"
  >
    <el-progress :percentage="progressPercent" />
  </div>
  
  <div class="confirmUpload">
    <el-button
      size="small"
      type="success"
      @click="submitUpload"
    >
      确认上传
    </el-button>
  </div>

js:

submitUpload() {
	//其他自定义代码...
	this.$refs.upload.submit();
}

upLoadFile(data) {
      const formdata = new FormData();
      const filePath = '你的文件上传至oss后期望其所在的目录位置'
      const filename = '文件名' //data.file.name是默认的文件名

      formdata.append('key', filePath + '/' + filename);
      formdata.append('name', filename);
      formdata.append('policy', 'oss的policy');
      formdata.append('OSSAccessKeyId', 'oss的OSSAccessKeyId');
      formdata.append('success_action_status', 200); //期待的返回的状态码，用于识别上传文件结束
      formdata.append('signature', 'oss的signature');
      formdata.append('file', data.file);// file必须放到最后
      // 进度条
      this.progressFlag = true;
      axios.post(this.ossConfig.host, formdata, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        onUploadProgress: progressEvent => { // 进度条
          this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
        },
      }).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '上传文件成功',
            type: 'success',
          });
          // 进度条重置并隐藏
          this.progressPercent = 0
          this.progressFlag = false
        }
      }).catch(err => {
        // 进度条重置并隐藏
        this.progressPercent = 0
        this.progressFlag = false
        console.log(err);
      })
    },
handleExceed(files, fileList) {
  this.$message.warning(`每次最多可上传一个资源`);
},