Antd Upload 上传实战

https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

(嫌弃)Form 方式自己组装发送

// 因为涉及到文件上传是单独分开的接口,使用form表单实现
// todo 服务器要拉取当前信息对应的所有附件信息
// 上传 formData <https://blog.csdn.net/TetaiSon/article/details/112677857>
// 自己构建 form data 设定 request 方法 post form
// 关键是知道 upload 的 file 就是一个 Blob list
let formData = new FormData();

Object.keys(newRecord).forEach((key) => {
  if (key !== 'upload') {
    formData.append(key, newRecord[key]);
  } else {
    // file 单独处理
    newRecord.upload?.forEach((file) => {
      formData.append('uploadFiles', file.originFileObj as any);
    });
  }
});

file.originFileObj 是 ANTD 封装的关键,另外,通过append 构造 form 数组。此外你要实现上传的逻辑。相比来说还是下面这种方法简洁。

(推荐)用 action 发送

组件使用传入action=”/api/files”

<ProFormUploadButton
        name="upload"
        width="md"
        label="上传附件"
        action="/api/files"
        max={5}
        fileList={fileList}
        fieldProps={{
          onChange: handleFileListChange,
        }}
      />

handleChange 方法

const handleFileListChange = (info: UploadChangeParam): void => {
    let { fileList, file } = { ...info };

    if (file.status === 'uploading') {
      // console.log('文件上传中', file, fileList);
    }
    if (file.status === 'done') {
      // console.log(file.response);

      if (file.response.success) {
        updateFileInfo(fileList, file);
        message.success(`${file.name} 上传成功!`, 0.5);
      } else {
        if (file.response.errorCode === 8015) {
          updateFileInfo(fileList, file);
          message.success(`${file.name} 上传成功!`, 0.5);
        } else {
          fileList.pop();
          message.error(`${file.response.message} !`, 0.5);
        }
      }
    } else if (file.status === 'error') {
      fileList.pop();
      message.error(`${file.name} 上传失败!`);
    }

    // 每次改变都要进行更新否则影响组件状态
    setFileList(fileList);
  };

这里有个细节,假如你要设置jwt,需要使用header属性指定

<ProFormUploadButton
        name="upload"
        width="md"
        label="上传附件"
        action="/api/files"
        max={5}
        fileList={fileList}
        fieldProps={{
          headers: { Authorization: 'Bearer ' + getJWT() },
          onChange: handleFileListChange,
          onRemove: handleFileRemove,
        }}
      />