javascript - Ant设计文件上传中使用customRequest
问题描述
我正在使用 Axios 来处理文件上传。我在显示文件上传的上传进度时遇到问题。我使用的文件上传视图是“图片卡”。
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'}]
};
自定义请求处理程序
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
rc-upload
在引擎盖下使用。onProgress
只接受一个参数。我还使用antd
Progress
了另一种显示进度的方式。阅读有关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>
);
};
这是一个演示
推荐阅读
- rxjs - 订阅包含 TakeUntil 的管道失败
- reactjs - 无法覆盖 Fab 禁用的颜色材料 - ui
- acumatica - 显示从网格 Acumatica 上的文件上传的图像
- jsonix - 强制 jsonix 输出 xsi:type 属性
- android - 打开初始片段时获取 KotlinNullPointerException
- r - R-使用“应用”功能将具有多个输入的功能应用于所有数据框行
- r - 将标题中的数字转换为日期
- ionic-framework - 如何修复错误“ionic-app-scripts 已意外关闭(退出代码 1)。”
- c# - 找不到这个 localhost 页面,可能是配置问题
- android - 如何在android webview中检测按钮点击网页