? 單獨的上傳圖片接口要傳參,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 filelistsetDefaultFileList(fileList);//filelist - [{uid: "-1",url:'Some url to image'}]};return (<div class="container"><Uploadaccept="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里進行邏輯處理!!!