做电影分享网站违法吗,企业网站设计,高端h5网站,2021年免费的网站有哪些单独的上传图片接口要传参,action方式不太适合,需要使用自定义上传customRequest覆盖 公司代码不可弄,就发一个可用的demo例子
import React, { useState } from react;
import { render } from react-dom;
import antd/dist/antd.css;
i… 单独的上传图片接口要传参,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 classcontainerUploadacceptimage/*customRequest{uploadImage}onChange{handleOnChange}listTypepicture-carddefaultFileList{defaultFileList}classNameimage-upload-gridonProgress{({ percent }) {console.log(progre..., percent);if (percent 100) {setTimeout(() setProgress(0), 1000);}return setProgress(Math.floor(percent));}}{defaultFileList.length 1 ? null : divUpload Button/div}/Upload{progress 0 ? Progress percent{progress} / : null}/div);
};render(App /, document.getElementById(root));onSuccess(res);
接口返回的数据都存到fileList里每个file的responese属性,还有state,可以在onChange里进行逻辑处理!!!
