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

问题描述

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

HTML

 <上传accept =图像/*"customRequest = {uploadImage}onChange = {handleOnChange}listType =图片卡"fileList = {defaultListOfFiles}className ="image-upload-grid">{defaultListOfFiles.length> = 8吗?null:< div>上传按钮</div>}</上传> 

OnChangeHandler

  const handleOnChange =({file，fileList，event})=>{console.log(file，fileList，event);//使用Hooks将状态更新为当前文件列表setDefaultFileList(fileList);//文件列表-[{uid:"-1"，url:图像的某些URL"}]}; 

CustomRequest处理程序

  const uploadImage = options =>{const {onSuccess，onError，file，onProgress} =选项；const fmData = new FormData();const config = {标头:{"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);轴距.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

  import {上传，进度}从"antd"开始；const App =()=>{const [defaultFileList，setDefaultFileList] = useState([]);const [progress，setProgress] = useState(0);const uploadImage =异步选项=>{const {onSuccess，onError，file，onProgress} =选项；const fmData = new FormData();const config = {标头:{"content-type":"multipart/form-data"}，onUploadProgress:event =>{const percent = Math.floor((event.loaded/event.total)* 100);setProgress(percent);如果(百分比=== 100){setTimeout(()=> setProgress(0)，1000);}onProgress({percent:(event.loaded/event.total)* 100});}};fmData.append("image"，file);尝试 {const res =等待axios.post("https://jsonplaceholder.typicode.com/posts"，fmData，配置);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);//使用Hooks将状态更新为当前文件列表setDefaultFileList(fileList);//文件列表-[{uid:"-1"，url:图像的某些URL"}]};返回 (< div class ="container"><上传accept =图像/*"customRequest = {uploadImage}onChange = {handleOnChange}listType =图片卡"defaultFileList = {defaultFileList}className ="image-upload-grid">{defaultFileList.length> = 1吗?null:< div>上传按钮</div>}</上传>{进度>0?<进度百分比= {进度}/>: 无效的}</div>);}; 

这是演示

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

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'}]
};

CustomRequest handler

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 Upload uses rc-upload under the hood. onProgress accepts only one argument. I have also used antd Progress for an alternative way of showing progress. Read more about 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>
  );
};

Here is a demo

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