Vue

npm i ali-oss

配置oss.js

  import OSS from 'ali-oss'
  const client = new OSS({
    region: 'oss-cn-hangzhou',
    accessKeyId: '---',
    accessKeySecret: '---',
    bucket: '---'
  })
  export default client

使用

  <div
   v-loading.fullscreen.lock="fullscreenLoading"
   :element-loading-text="loadingTxt">
    <el-upload
      action="/upImg"
      name="img"
      :http-request="httpRequest"
      :before-upload="befUpload"
      :show-file-list="false"
    >
      schuan
    </el-upload>
  </div>

data(){
    return {
      fullscreenLoading:false,
      loadingTxt:""
    }
  },

import client from "./oss.js";

 async httpRequest({ file }) {
this.fullscreenLoading = true;
       let _this = this;
      let filename = Date.now() + "." + file.name.replace(/.+\./, "");
      try {
        let res = await client.multipartUpload(filename, file, {
          progress: function (p, checkpoint) {
            console.log(p); // 序号 
            console.log(checkpoint);  // 片段文件
 _this.loadingTxt = (p * 100).toString().split('.')[0] + "%";
          },
        });
        if (res.res.status == 200) {
this.fullscreenLoading = false;
          let resUrl = res.res.requestUrls[0];
          console.log(resUrl.split("?"));
          console.log(res);
        }
      } catch (e) {
        console.log(e);
      }
    }

修改跨域问题