React Antd Upload自定义上传customRequest

单独的上传图片接口要传参,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里进行逻辑处理!!!

React Antd Upload自定义上传customRequest相关推荐

Ant Design Upload 自定义上传 customRequest
本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现目录 Upload 常用属性和方法默认上传 customRequest 自定义上传 Upload 自定 ...
antd Upload 自定义上传
需求由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件导致上传路径为空情况解决办法使用自定义上传 // 自定义上 ...
antd Upload组件上传状态一直处于uploading
antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...
使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法
使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法使用angular框架写前端的用户一般都比较喜欢用ngZorro,本人最近在使用ngZorro中的Upload自定 ...
antd Upload手动上传(react)
情况介绍在antd官方提供的upload组件案例中,都使用了action属性直接上传,唯一手动上传的一个例子(如下图)也不够好用,可能不能满足项目的需求,所以我们需要对其进行一些修改,并加入一些别的 ...
Antd Upload 文件上传，自定义上传错误信息
项目需求使用antd Upload 组件项目上要求前端对上传不符合标准的图片展示具体的错误信息不设置action,即返回信息无response ,先在前端上传后调用接口保存效果截图主要是根据 ...
antd Upload 文件上传
1.antd官网Upload组件: https://ant.design/components/upload-cn/ 2.下图是最近开发的上传文档的效果: 3.文件上传的实现: (1)方法一:antd ...
react+antd实现图片上传并且剪裁（请参照最新文章，此案例有bug）
代码详情 (存在的bug:只有第一次上传剪裁是正确的,在不刷新页面的情况下再次进行剪裁会出现错误,目前没有找到解决办法.) 解决办法:点击上传按钮完成上传之后,按钮变为不能点击的状态,阻止bug的发生 ...
antd upload手动上传_Flask上传文件
Flask上传文件上传文件包括很多,比如用户头像,文章图片,文件分享等等,它也涉及到很多内容:上传文件,过滤文件类型,限制大小,文件名的编辑,拖拽上传,进度条,文件命名,文件目录的管理等等. 文件上 ...

React Antd Upload自定义上传customRequest

React Antd Upload自定义上传customRequest相关推荐

最新文章

热门文章