缘起

上传和下载是两个经典场景，做项目的时候遇到了这两种情况。

上传

设置上传按钮

const upoadImgCom = () => {
  return (
    <>
      <label className={styles["upload-button"]} htmlFor="fileInputCompanyLogo">
        +
      </label>
      <input
        id="fileInputCompanyLogo"
        accept={acceptFileTypeList}
        onChange={uploadFileAction}
        type="file"
        multiple
      />
    </>
  );
};

相应样式文件

.upload-button {
  color: #c3c3c3;
  background: #f2f2f2;
  width: 100px;
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &:hover {
    color: #008cff;
    border: 1px solid #008cff;
  }
}
input {
  display: none;
}

获取上传文件

注意这里获取到的uploadFile.files是文件流类型，不能用数组方法。[...uploadFileEle.files]转化为数组类型后，判断是否通过上传校验（大小、文件类型等）

const uploadFileAction = (e) => {
  const uploadFileEle = document.querySelector("#fileInputCompanyLogo");
  if (!uploadFileEle.files.length) return;
  // 校验上传文件是否符合准入条件
  const files = [...uploadFileEle.files];
  const isValid = beforeUpload(files, fileSizeLimit, legTypeList);
  if (!isValid) return;

  const file = uploadFileEle.files[0];
  dispatch({ type: "uploadImg", payload: file });
  // onchange监听的为input的value值，只有再内容发生改变的时候去触发
  // 成功后将value值置空，使得能够检测到下一次上传内容
  e.target.value = "";
  // }
};

关于`beforeUpload`方法

以上传 20MB，类型为图片文件为例

// 文件大小限制
const fileSizeLimit = 20 * 1024 * 1024;
// 文件类型限制
const legTypeList = ["png", "jpg", "jpeg"];

// 1 KB = 1024 B
// 转换文件大小为可读单位
export const getFileSize = (fileSize) => {
  let result = "";

  if (fileSize >= 1073741824) {
    // B => GB
    result =
      fileSize % 1073741824 === 0
        ? `${fileSize / 1073741824}G`
        : `${Math.trunc(fileSize / 1073741824)}G`;
  } else if (fileSize >= 1048576) {
    // B => MB
    result =
      fileSize % 1048576 === 0
        ? `${fileSize / 1048576}MB`
        : `${Math.trunc(fileSize / 1048576)}MB`;
  } else if (fileSize >= 1024) {
    // B => KB
    result =
      fileSize % 1024 === 0
        ? `${fileSize / 1024}KB`
        : `${Math.trunc(fileSize / 1024)}KB`;
  } else if (fileSize !== undefined) {
    result = `${fileSize}B`;
  }
  return result;
};

// 根据文件名后缀获取当前文件类型
export const getLastFileTypeByName = (value) => {
  const dotArray = value.split(".");
  const lastDotArray = dotArray[dotArray.length - 1];
  return lastDotArray;
};

export const getFileTypeBySource = (file, legitTypeList) => {
  // 注意这里的类型判断一定要从文件名读取！ ios 无 file.type!!!
  const exactFileValue = file.name;
  const lastFileTypeByName = getLastFileTypeByName(exactFileValue);

  // 实测移动端 不走相册 直接选图片文件 尾缀为大写PNG 这里多加一层逻辑
  // ↑ 从H5抄过来的 问题不大
  // 这里全部转换成小写 进入匹配
  let isLegitType = false;
  isLegitType = legitTypeList.some((key) =>
    lastFileTypeByName.toLowerCase().includes(key)
  );
  return isLegitType;
};

// 上传文件前置校验 文件类型 文件大小
export const beforeUpload = (files, fileSizeLimit, legTypeList) => {
  const readableMaxFileSize = getFileSize(fileSizeLimit);
  const fileSupportTypeText = legTypeList.join("、");

  // if (!(files && files.length)) {
  //   message.error(`请添加${kind}`);
  //   return false;
  // }

  let flag = true;

  // eslint-disable-next-line consistent-return
  files.forEach((file) => {
    const isLegFileType = getFileTypeBySource(file, legTypeList);

    if (!isLegFileType) {
      message.error(`文件支持格式： ${fileSupportTypeText}`);
      flag = false;
    }
    if (file.size > fileSizeLimit) {
      message.error(`文件最大支持${readableMaxFileSize}`);
      flag = false;
    }
  });
  return flag;
};

上传图片后可临时预览

https://juejin.cn/post/7240486780578480189

FileReader 转换为 base64 格式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片本地预览示例</title>
  </head>
  <body>
    <h3>阿宝哥：图片本地预览示例</h3>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <img id="previewContainer" />

    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function () {
          const output = document.querySelector("#previewContainer");
          output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
      };
    </script>
  </body>
</html>