阿里云oss前端直传,关键代码就下面这些

<template>

  <div>

    <el-upload class="upload-demo" action="" :http-request="onUpload">

      <el-button size="small" type="primary">点击上传</el-button>

      <!-- 进度条 -->

      <el-progress v-if="!!percentageValue" :percentage="percentageValue"></el-progress>

    </el-upload>

  </div>

</template>

<script>

import OSS from "ali-oss"

export default {

  methods: {

    onUpload(e) {

      const param = new Form

      // 创建一个键值对

      const files = e.file

      param.append('file', files, files.name);

      var client = new OSS({

        //桶的地址

        region: this.$store.state.user.ossKey.region,

        //id

        accessKeyId: this.$store.state.user.ossKey.accessId,

        //密钥

        accessKeySecret: this.$store.state.user.ossKey.accessKey,

        //桶的名字

        bucket: this.$store.state.user.ossKey.bucket,

        //true协议https

        secure: false,

      });

      /* 另外的上传方式let result = await client.put(fileName, files) */

      // 调用阿里上传

      // "udkp/new-version/" + this.time() + "/" + getFileTypeValue + "/" + new Date().getTime() + this.getFileExtension(files.name)这个自定义的路径,w为了方便大家看,删了原本封装的方法

      client.multipartUpload("udkp/new-version/" + this.time() + "/" + getFileTypeValue + "/" + new Date().getTime() + this.getFileExtension(files.name), files, {

        headers: {

          'Content-Disposition': 'inline',

          'Content-Type': files.type

        },

        progress: (originalValue) => {

          //  获取阿里上传进度条

          this.percentageValue = Number(Math.floor(originalValue * 100));

        }

      }).then(result => {

        // 拿到url

        var url = result.res.requestUrls[0].split("?")[0];

      })

    }

  },

}

</script>