700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > React 单文件上传和多文件上传的封装

React 单文件上传和多文件上传的封装

时间:2020-10-07 05:35:55

相关推荐

React 单文件上传和多文件上传的封装

1. 新建request.ts 文件

@/utils/request.ts

// 文件上传export const requestFile = async (params: {[key: string]: any }, query: Function, successFn: Function, progressFn?: Function, errorFn?: Function) => {const formData = new FormData();formData.append('multipartFile', params.multipartFile);const response = await query(formData)const res = {data: response.body}if (successFn) successFn(response.body);return Promise.resolve(res);}// 多文件上传export const requestFiles = async (params: {[key: string]: any }, query: Function, successFn: Function, progressFn?: Function, errorFn?: Function) => {const formData = new FormData();params.multipartFiles.map(item => formData.append('multipartFiles', item));const response = await query(formData)const res = {data: response.body}if (successFn) successFn(response.body);return Promise.resolve(res);}

2. 页面中实现

@/pages/Demo/Demo.js

//文件上传handleSaveFile(){const {fileList} = this.state;//uploadFile参数为上传文件接口requestFiles({multipartFiles: fileList[0].originFileObj}, uploadFile,async (res)=>{console.log(res);})}//多文件上传handleSaveFiles(){const {fileList} = this.state;let payload=[];fileList.map(item=>{payload.push(item.originFileObj);})//uploadFiles参数为上传多文件接口requestFiles({multipartFiles: payload}, uploadFiles,async (res)=>{console.log(res);})}

uploadFile 接口

uploadFiles 接口

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。