在 Ant 设计文件上传中使用 customRequest [英] Using customRequest in Ant design file upload

问题描述

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

I am using Axios to handle the file upload. I am facing a problem showing the upload progress of the file upload. The file upload view I am using is "picture-card".

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

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});
    });
}

推荐答案

antd

JSX

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> ); };

这是一个演示

这篇关于在 Ant 设计文件上传中使用 customRequest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！