Ali-oss文件上传

// 安装
npm install ali-oss --save

// oss.js 创建实例
const OSS = require('ali-oss');
const client = new OSS({
  region: 'oss-cn-hangzhou-zwynet-d01-a', // 创建的时候，bucket所在的区域，华北2->oss-cn-beijing ；其他的可以去百度
  accessKeyId: 'RmcrhGFdaT3AjDrl', // 阿里云控制台创建的AccessKey
  accessKeySecret: 'bA8gJz25IdtekrlcBTvVrss60zaImB', // 阿里云控制台创建的AccessSecret
  bucket: 'osscommon', // 创建的bucket的名称
  internal: true,
  cname: true,
  endpoint: 'osscommon.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn',
  secure: true
});
// 写成共用的，下面转换成真实的地址要用
let envPre = 'preprod/'; // 预生产
const origin = window.location.origin;
if (origin.includes('dev')) {
  envPre = 'dev/'; // 开发
} else if (origin.includes('test')) {
  envPre = 'test/'; // 测试
} else if (origin.includes('gov') && !origin.includes('2020')) {
  // 正式环境
  envPre = 'prod/';
} else if (process.env.NODE_ENV === 'development') {
  envPre = 'dev/'; // 本地启动(具体看代理地址)
}
// 关于切片上传报错：https://help.aliyun.com/zh/oss/the-please-set-the-etag-of-expose-headers-in-oss-error-message-is-returned-when-you-use-multipart-upload-to-upload-files

export const multipartUpload = async (objNamePath, file, option = {}) => {
  console.log(envPre + objNamePath, file, option);
  try {
    // objNamePath为文件名字及其oss储存路径,可以只写名字，就直接储存在 bucket 的根路径，如需放在文件夹下面直接在文件名前面加上文件夹名称
    const result = await client.multipartUpload(envPre + objNamePath, file, {
      ...option
    });
    return result;
  } catch (e) {
    console.log(e);
  }
};

// 上传成功之后，转换真实的地址
export const signatureUrl = async ObjName => {
  try {
    // expires 设置过期时间 10年
    const result = await client.signatureUrl(`${envPre}${ObjName}`, {
      expires: 315360000
    });
    return result;
  } catch (e) {
    console.log(e);
  }
};

export const getFileNameUUID = () => {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
  return `${+new Date()}_${rx()}${rx()}`;
};

export const cancel = () => {
  let statusMsg = '取消上传';
  if (client) {
    client.cancel();
  } else {
    statusMsg = '取消上传失败';
  }
  return statusMsg;
};
export const getRealFileUrl = url => {
  url = url.split('?')[0];
  url = url.split('supervise_document')[1];
  return url;
};

// element-ui el-upload 文件上传组件
<el-upload
  class="upload-demo"
  drag
  action="#"
  :limit="1"
  multiple
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  :file-list="fileList"
  :http-request="handleUpload"
  :on-exceed="onExceed"
>
  <i class="el-icon-upload" />
  <div class="el-upload__text">
    将文件拖到此处，或
    <em>点击上传</em>
  </div>
  <div v-if="imageUrl" class="avatar">
    <video ref="videoRef" controls :poster="imageUrl">
      <source :src="imageUrl">
    </video>
  </div>
  <!-- <canvas id="mycanvas" /> -->
  <div v-if="detailForm.learnType === 2" slot="tip" class="el-upload__tip">只支持mp4,ogg,webm格式视频文件</div>
  <div v-if="detailForm.learnType === 1 && detailForm.documentType === 2" slot="tip" class="el-upload__tip">只支持.pdf扩展名</div>
</el-upload>

 handleUpload(file) {
      console.log(file, 'file');
      this.percentage = 0;
      this.isPercentage = true;

      // this.$nextTick(() => {
      //   this.fileList = [{
      //     name: file.file.name,
      //     url: ``
      //   }];
      // });
      // 获取文件的后缀名
      // let objName = getFileNameUUID();
      var obj = file.file.name;
      var index = obj.lastIndexOf(".");
      obj = obj.substring(index, obj.length);
      // 生成的文件名，保留文件后缀名，进行拼接
      const ossFileName = `${getFileNameUUID()}${this.getFileName(file.file.name)}`;

      // const objName = `${this.id}/0/${ossFileName}`;

      // 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
      const option = {
        progress: (p) => { // 获取进度条的值
          // store[this.id].progressBool = true;
          this.percentage = Number((p * 100).toFixed(0));
        }
        // parallel: 4,
        // // 设置分片大小。默认值为1 MB，最小值为100 KB。
        // partSize: 1024 * 1024,
        // // headers,
        // // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
        // meta: { year: 2020, people: "test" },
        // mime: "text/plain"
      };
      console.log("ossFileName", ossFileName);
      multipartUpload(`popularize-law-education/${file.file.name}`, file.file, option).then(res => {
        if (res && res.res.status === 200) {
          // 上传成功之后，转换真实的地址
          signatureUrl(`popularize-law-education/${file.file.name}}`).then(res => {
            console.log('地址', res);
            API.changeOssUrl({
              ossDirectory: `/popularize-law-education/${file.file.name}`
            }).then(res => {
              if (res.success) {
                this.dialogVisible = false;
                this.$message.success('上传成功');
              }
            });
          });
        } else {
          this.fileList = [];
        }
      });
    },