proginn-frontend/mixins/oos.js

import axios from 'axios'

let OSS = require('ali-oss');

export default {
  mounted() {
  },
  data() {
    return {
      uploadFileList: [],
      fileUploadCallBackParams: {return_data: {data: {}, status: 0}, upload_id: ""},
      tempCheckpoint: {},
      uploadPercentage: 0,
      oosClient: null,
      isUploading: false
    }
  },

  methods: {
    uploadFileChange(file) {
      console.log(file);
      if (file.size / 1024 > 1024 * 1000) {
        this.$message.error("作品大小不得超过1G，请重新选择");
        this.$refs.upload.clearFiles();
        return false;
      }
      this.prepareUpload(file);
    },

    initUpload(file) {
      if (this.isUploading) {
        this.oosClient.cancel();
      }
      this.uploadPercentage = 0;
      this.uploadFileList = [];
      if (file)
        this.uploadFileList.push({name: file.name, url: "", path: ""});
    },

    uploadFileOnProgress(event, file, fileList) {

    },
    uploadFileDelete(file = null) {
      this.initUpload();
    },
    /**
     * 上传文件出错
     */
    uploadFileError() {

    },
    /**
     * 预上传
     * @param file
     * @param callback
     */
    prepareUpload(file) {
      //初始化上传状态
      this.initUpload(file);
      const formData = new FormData();
      let wid = this.$route.query.wid;
      formData.append("target", `{ "type": 5 ,"work_id":${wid || -1}}`);
      formData.append("filename", file.name);
      this.$axios.$post(`/file/prepareUpload`, formData, {headers: {"Content-Type": "multipart/form-data"}}).then(data => {
        console.log("data", data);
        this.fileUploadCallBackParams.upload_id = data.data.upload_id;
        this.fileUploadCallBackParams.return_data.data._upload_id = data.data.upload_id;
        // this._ossUpload(data.data, file);
        this._ossMultipartUpload(data.data, file)
      }).catch(err => {

      });
    },
    /**
     * 阿里云上传
     * @param data
     * @param file
     * @private
     */
    _ossUpload(data, file) {
      try {
        this.oosClient = OSS({
          region: "oss-cn-beijing",
          // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
          accessKeyId: data.sts.Credentials.AccessKeyId,
          accessKeySecret: data.sts.Credentials.AccessKeySecret,
          stsToken: data.sts.Credentials.SecurityToken,
          bucket: data.post_params.bucket
        });
        // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
        this.oosClient.put(data.post_params.policy['save-key'], file.raw).then(res => {
          console.log("*******", res);
          if (res.res.status === 200) {
            this.setUploadComplete(res, file);
          }
        }).catch(err => {
          console.log(err);
        });
      } catch (e) {
        console.log(e);
      }
    },

    _ossMultipartUpload(data, file) {
      try {
        this.oosClient = OSS({
          region: "oss-cn-beijing",
          // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
          accessKeyId: data.sts.Credentials.AccessKeyId,
          accessKeySecret: data.sts.Credentials.AccessKeySecret,
          stsToken: data.sts.Credentials.SecurityToken,
          bucket: data.post_params.bucket
        });
        let tempCheckpoint;
        // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
        this.oosClient.multipartUpload(data.post_params.policy['save-key'], file.raw, {
          progress: (p, checkpoint) => {
            // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
            tempCheckpoint = checkpoint;
            this.uploadPercentage = p * 100;
            this.isUploading = p !== 1;
            console.log(this.uploadPercentage);
          },
          meta: {year: 2020, people: 'test'},
          mime: file.type,
        }).then(res => {
          console.log("multipartUpload res", res);
          this.setUploadComplete(res, file);
        }).catch(err => {
          console.log("multipartUpload err", err);
        })
      } catch (e) {
        console.log(e);
      }
    },

    /**
     * 设置上传结果检查的参数
     * @param res
     * @param file
     */
    setUploadComplete(res, file) {
      this.fileUploadCallBackParams.return_data.status = 1;
      this.fileUploadCallBackParams.return_data.data.url = "https:\/\/filescdn.proginn.com/" + res.name;
      this.fileUploadCallBackParams.return_data.data.path = res.name;
      this.fileUploadCallBackParams.return_data.data.size = file.size;
      this.fileUploadCallBackParams.return_data.data.name = file.name;
      this.fileUploadCallBackParams.return_data = JSON.stringify(this.fileUploadCallBackParams.return_data);

      console.log("~~~~~~~~~~~~~~", this.fileUploadCallBackParams);
      this.uploadCallBack();
    },
    /**
     * 阿里云上传回调
     */
    uploadCallBack() {
      this.$axios.$post("/file/uploadCallBack", this.fileUploadCallBackParams).then((res) => {
        this.fileUploadCallBackParams = {return_data: {data: {}, status: 0}, upload_id: ""};
        if (res.status === 1) {
          this.uploadFileList = [];
          this.uploadFileList.push({name: res.data.name, url: res.data.url, path: res.data.path});
          this.$message.success("上传成功");
        } else {
          this.$message.success(`上传失败-${res.info}`);
        }
      }).catch(err => {
        console.log(err);
      })
    },
  }
}