Upload组件对接阿里云OSS

现在云存储是一种很常见的需求, 各种云存储也是十分推荐 Web端直接上传至OSS

上传OSS组件

API

const getFileSuffix = (fileName: string) => {
  const index = fileName.lastIndexOf('.');
  const ext = fileName.substr(index + 1);
  return ext;
};

const getObjectURL = (file: any) => {
  let url = null;
  if (window.createObjectURL !== undefined) {
    url = window.createObjectURL(file);
  } else if (window.URL !== undefined) {
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL !== undefined) {
    url = window.webkitURL.createObjectURL(file);
  }
  return url;
};

const SixueUpload = async (
  type: number,
  bizKey: string,
  systemName: string,
  OssSignature: any,
  file: any,
  uploadOptions: any,
) => {
  let fileName: string;
  const fileTypes = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
  if (fileTypes.includes(getFileSuffix(file.name))) {
    fileName = `${file.uid}${file.name}`;
  } else {
    fileName = file.name;
  }
  const params = {
    type,
    bizKey,
    fileName,
    tag: systemName,
  };
  const res = await OssSignature(params);
  if (res.data.code === '0') {
    const data = res?.data?.data;
    file.id = data.fileId;
    const name = fileName.replace(/\s+/g, '');
    const baseUrl = await getObjectURL(file);
    uploadOptions.data = {
      name,
      key: data.fileKey,
      policy: data.policy,
      OSSAccessKeyId: data.accessId,
      callback: data.callback,
      signature: data.signature,
      'x:osstype': data.xossType,
      'x:filekey': data.xfileKey,
      'x:style': data.xstyle,
    };
    uploadOptions.action = data.endpoint.replace('//', `//${data.bucketName}.`);
    file.url = `${data.endpoint.replace('//', `//${data.bucketName}.`)}/${data.fileKey}`;
    file.baseUrl = baseUrl;
    return uploadOptions;
  }
};

图片上传组件

import React, {useState, useEffect, useRef} from 'react';
import {Upload, Message, Icon} from '@alifd/next';
import SixueUpload from 'sixue-upload';

export default function SixueImgUpload(props: ComponentProps) {
  const {...others} = props;

  const getFileSuffix = (fileName: string) => {
    const index = fileName.lastIndexOf('.');
    const ext = fileName.substr(index + 1);
    return ext;
  };

  const fileUpload = async (file: any, uploadOptions: any) => {
    const fileTypes = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
    if (!fileTypes.includes(getFileSuffix(file.name))) {
      Message.error(`不允许上传${getFileSuffix(file.name)}类型文件`);
      return false;
    }
    const size = Number((file.size/1024).toFixed(2));
    if (size > others.uploadSize) {
      Message.error('文件过大，请压缩后上传');
      return false;
    }
    const res = await SixueUpload(
      others.uploadType,
      others.bizKey,
      others.systemName,
      others.ossSignature,
      file,
      uploadOptions
    );
    return res;
  };
  
  const fileChange = (info: any) => {
    if (info[info.length - 1].state === 'error') {
      delete info[info.length - 1];
      uploaderRef.state.value = [];
      return;
    }
    if (info.length > 0) {
      const item = info[info.length - 1];
      const id = item.originFileObj.id;
      const name = item.name;
      const url = item.originFileObj.baseUrl;
      if (url !== undefined) {
        others.fileList.push({id, name, url});
      }
      others.setFileList([...others.fileList]);
    }
  };

  return (
    <Upload
              useDataURL
              shape='card'
              accept='image/png, image/jpg, image/jpeg, image/gif, image/bmp'
              dragable={true}
              withCredentials={false}
              beforeUpload={fileUpload}
              onChange={fileChange}
              ref={saveUploaderRef}
            >
              上传图片
    </Upload>
  )
}