网页设计广州网站,深圳商城软件开发,wordpress评论审核项,玩具 东莞网站建设 技术支持需求
将图片、pdf、word、excel等文件进行上传。图片、pdf等调接口A、word、excel等附件调接口B。接口关于文件是base64格式的参数
业务场景
上传资源#xff0c;区分影像与附件
逻辑思路
使用原生input标签#xff0c;typefile#xff0c;进行上传上传后的回调#x…需求
将图片、pdf、word、excel等文件进行上传。图片、pdf等调接口A、word、excel等附件调接口B。接口关于文件是base64格式的参数
业务场景
上传资源区分影像与附件
逻辑思路
使用原生input标签typefile进行上传上传后的回调对文件进行分类影像与附件对文件进行base64编码执行接口进行上传
代码实现
点击input进行上传选择文件后执行onChange回调
inputtypefilemultipleref{uploadInputRef}onChange{uploadFileOnChange}/对文件进行分类我这里是通过type去判断的
export const uploadFileOnChange async (e: ChangeEventHTMLInputElement) {const files e.target.files;// 将影像以及附件分类const images: File[] [];const attachments: File[] [];for (const iterator of files ?? []) {if (iterator.type.includes(sheet) ||iterator.type.includes(excel) ||iterator.type.includes(csv) ||iterator.type.includes(word)) {attachments.push(iterator);} else {images.push(iterator);}}
};对文件进行base64编码
async function readFileAsDataURL(file: Blob) {const result_base64 await new Promisestring((resolve) {const fileReader new FileReader();fileReader.readAsDataURL(file);fileReader.onload () typeof fileReader.result string resolve(fileReader.result);});return result_base64.split(base64,)[1];
}export const uploadFileOnChange async (e: ChangeEventHTMLInputElement) {const files e.target.files;// 将影像以及附件分类const images: File[] [];const attachments: File[] [];for (const iterator of files ?? []) {if (iterator.type.includes(sheet) ||iterator.type.includes(excel) ||iterator.type.includes(csv) ||iterator.type.includes(word)) {attachments.push(iterator);} else {images.push(iterator);}}const imageData: ImageData[] [];const affixData: AffixData[] [];for (const i of images) {const imgBase64 await readFileAsDataURL(i);imageData.push({name: i.name,imgBase64,});}for (const i of attachments) {const affixBase64 await readFileAsDataURL(i);affixData.push({name: i.name,affixBase64,});}return {imageData,affixData,};
};拿到上一步返回的数据调接口
