Ant设计文件上传中使用customRequest

Posted 2023-03-07

【中文标题】Ant设计文件上传中使用customRequest

【英文标题】：Using customRequest in Ant design file upload

【发布时间】：2020-01-27 09:32:04

【问题描述】：

我正在使用 Axios 来处理文件上传。我在显示文件上传的上传进度时遇到问题。我使用的文件上传视图是“图片卡”。

html

<Upload
  accept="image/*"
  customRequest=uploadImage
  onChange=handleOnChange
  listType="picture-card"
  fileList=defaultListOfFiles
  className="image-upload-grid"
>
  defaultListOfFiles.length >= 8 ? null : <div>Upload Button</div>
</Upload>

OnChangeHandler

const handleOnChange = ( file, fileList, event ) => 
  console.log(file, fileList, event);
  //Using Hooks to update the state to the current filelist
  setDefaultFileList(fileList);
  //filelist - [uid: "-1",url:'Some url to image']
;

自定义请求处理程序

const uploadImage = options => 

  const  onSuccess, onError, file, onProgress  = options;

  const fmData = new FormData();
  const config = 
    headers:  "content-type": "multipart/form-data" ,
    onUploadProgress: event => 
      console.log((event.loaded / event.total) * 100);
      onProgress( percent: (event.loaded / event.total) * 100 ,file);
    
  ;
  fmData.append("image", file);
  axios
    .post("http://localhost:4000/upload", fmData, config)
    .then(res => 
      onSuccess(file);
      console.log(res);
    )
    .catch(err=>
      const error = new Error('Some error');
      onError(event:error);
    );

【参考方案1】：

antd Upload 在后台使用rc-upload。 onProgress 只接受一个参数。我还使用了antdProgress 作为显示进度的另一种方式。阅读更多关于customRequest的信息。

JSX

import  Upload, Progress  from "antd";

const App = () => 
  const [defaultFileList, setDefaultFileList] = useState([]);
  const [progress, setProgress] = useState(0);

  const uploadImage = async options => 
    const  onSuccess, onError, file, onProgress  = options;

    const fmData = new FormData();
    const config = 
      headers:  "content-type": "multipart/form-data" ,
      onUploadProgress: event => 
        const percent = Math.floor((event.loaded / event.total) * 100);
        setProgress(percent);
        if (percent === 100) 
          setTimeout(() => setProgress(0), 1000);
        
        onProgress( percent: (event.loaded / event.total) * 100 );
      
    ;
    fmData.append("image", file);
    try 
      const res = await axios.post(
        "https://jsonplaceholder.typicode.com/posts",
        fmData,
        config
      );

      onSuccess("Ok");
      console.log("server res: ", res);
     catch (err) 
      console.log("Eroor: ", err);
      const error = new Error("Some error");
      onError( err );
    
  ;

  const handleOnChange = ( file, fileList, event ) => 
    // console.log(file, fileList, event);
    //Using Hooks to update the state to the current filelist
    setDefaultFileList(fileList);
    //filelist - [uid: "-1",url:'Some url to image']
  ;

  return (
    <div class="container">
      <Upload
        accept="image/*"
        customRequest=uploadImage
        onChange=handleOnChange
        listType="picture-card"
        defaultFileList=defaultFileList
        className="image-upload-grid"
      >
        defaultFileList.length >= 1 ? null : <div>Upload Button</div>
      </Upload>
      progress > 0 ? <Progress percent=progress /> : null
    </div>
  );
;

这是demo

【讨论】：

onUploadProgress 仅在进度完成时才被触发。所以 event.loaded & event.total 总是一样的。因此，我们看到进度条很快就移动了 100%。

您在这里找到解决方案了吗？ @TA3