classroom-instruments/src/helpers/oss-file-upload.ts

import request from '@/utils/request';
import axios from 'axios';
import COS from 'cos-js-sdk-v5';
export const ossSwitch = 'tencent' as 'ks3' | 'tencent'; // 上传文件服务商
const tencentBucket = 'daya-online-1303457149';

/**
 * 管乐团 gyt/
 * 酷乐秀 klx/
 * 课堂乐器 ktqy/
 * 管乐迷 gym/
 */

// 定义一个cos 对象
/**
 * 获取上传文件签名
 * @param params 上传对应参数
 * { filename: fileName,
     bucketName: props.bucketName,
     postData: {
      filename: fileName,
      acl: 'public-read',
      key: fileName,
      unknowValueField: []
    }}
 * @param oss 服务商 ks3 tencent
 * @returns ”{'signatur'':'',''kssAccessKeyI'':'',''policy': '' }“
 */
export const getUploadSign = async (params: any) => {
  const { bucketName, filename, postData } = params;
  const ossType = ossSwitch;
  let bucket = bucketName;
  let file = filename;
  // const key = postData.key;
  let tempPostData: any = {};
  if (ossType === 'tencent') {
    bucket = tencentBucket;
    file = 'ktqy/' + filename;

    tempPostData = {
      key: 'ktqy/' + postData.key
    };
  } else {
    tempPostData = postData;
  }
  return request.post('/edu-app/open/getUploadSign', {
    data: {
      postData: tempPostData,
      pluginName: ossType,
      bucketName: bucket,
      filename: file
    },
    params: { pluginName: ossType }
  });
};

/**
 * 使用组件上传时，调用方法
 * @param param0
 */
export const onFileUpload = ({
  file,
  action,
  data,
  onProgress,
  onFinish,
  onError
}: any) => {
  if (ossSwitch === 'ks3') {
    const fileParams = {
      policy: data.policy,
      signature: data.signature,
      key: data.key,
      acl: 'public-read',
      KSSAccessKeyId: data.KSSAccessKeyId,
      name: data.name
    } as any;
    const formData = new FormData();
    for (const key in fileParams) {
      formData.append(key, fileParams[key]);
    }
    formData.append('file', data.file as File);
    axios
      .post(action as string, formData, {
        onUploadProgress: ({ progress }) => {
          console.log(progress);
          onProgress({ percent: Math.ceil((progress || 0) * 100) });
        }
      })
      .then(() => {
        file.url = action + data.key;
        onFinish();
      })
      .catch(error => {
        onError(error);
      });
  } else {
    const cos = new COS({
      // getAuthorization 必选参数
      getAuthorization: async (options, callback: any) => {
        callback({ Authorization: data.signature });
      }
    });
    cos
      .uploadFile({
        Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
        Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
        Key: `ktqy/${data.name}`,
        /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: data.file.file, // 上传文件对象
        SliceSize:
          1024 *
          1024 *
          500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
        onProgress: function (progressData) {
          onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) });
        }
      })
      .then((res: any) => {
        // file.url = 'https://' + res.Location;
        if (res.Location?.indexOf('http') >= 0) {
          file.url = res.Location;
        } else {
          file.url = 'https://' + res.Location;
        }
        onFinish();
      })
      .catch(error => {
        console.log(error, 'error');
        onError();
      });
  }
};

export const onOnlyFileUpload = async (action: string, params: any) => {
  if (ossSwitch === 'ks3') {
    const fileParams = {
      policy: params.policy,
      signature: params.signature,
      key: params.key,
      acl: 'public-read',
      KSSAccessKeyId: params.KSSAccessKeyId,
      name: params.name
    } as any;
    const formData = new FormData();
    for (const key in fileParams) {
      formData.append(key, fileParams[key]);
    }
    formData.append('file', params.file as File);
    let file = '';
    let errorObj: any = null;
    await axios
      .post(action as string, formData, {
        // onUploadProgress: ({ progress }) => {
        //   console.log(progress);
        //   onProgress({ percent: Math.ceil((progress || 0) * 100) });
        // }
      })
      .then(() => {
        file = action + params.key;
      })
      .catch(error => {
        // onError(error);
        errorObj = error;
        // throw new Error(error);
      });
    if (file) {
      return file;
    } else {
      throw new Error(errorObj);
    }
    return file;
  } else {
    let file = '';
    let errorObj: any = null;
    const cos = new COS({
      // getAuthorization 必选参数
      getAuthorization: async (options, callback: any) => {
        callback({ Authorization: params.signature });
      }
    });
    await cos
      .uploadFile({
        Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
        Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
        Key: `ktqy/${params.name}`,
        /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: params.file, // 上传文件对象
        SliceSize:
          1024 *
          1024 *
          500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
        // onProgress: function (progressData) {
        //   onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) });
        // }
      })
      .then((res: any) => {
        // file.url = 'https://' + res.Location;
        // file = 'https://' + res.Location;
        if (res.Location?.indexOf('http') >= 0) {
          file = res.Location;
        } else {
          file = 'https://' + res.Location;
        }
        // onFinish();
      })
      .catch(error => {
        // console.log(error, 'error');
        // onError();
        // throw new Error(error);
        errorObj = error;
      });
    if (file) {
      return file;
    } else {
      throw new Error(errorObj);
    }
  }
};