React Antd Upload自定义上传customRequest

最新推荐文章于 2024-08-02 10:52:24 发布

原创最新推荐文章于 2024-08-02 10:52:24 发布 · 4.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

React 同时被 2 个专栏收录

16 篇文章

订阅专栏

AntDesign

4 篇文章

订阅专栏

本文介绍如何在React应用中使用Ant Design Upload组件实现定制上传图片功能，并通过axios处理上传请求，展示如何解析服务器返回的文件信息。关键在于理解自定义请求配置及状态管理。

单独的上传图片接口要传参,action方式不太适合,需要使用自定义上传customRequest覆盖

公司代码不可弄,就发一个可用的demo例子

import React, { useState } from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";
import axios from "axios";
import "./style.css";

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(res);
      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"
        onProgress={({ percent }) => {
          console.log("progre...", percent);
          if (percent === 100) {
            setTimeout(() => setProgress(0), 1000);
          }
          return setProgress(Math.floor(percent));
        }}
      >
        {defaultFileList.length >= 1 ? null : <div>Upload Button</div>}
      </Upload>
      {progress > 0 ? <Progress percent={progress} /> : null}
    </div>
  );
};

render(<App />, document.getElementById("root"));

onSuccess(res);

接口返回的数据都存到fileList里每个file的responese属性,还有state,可以在onChange里进行逻辑处理!!!