react将文件转为base64进行上传

这篇具有很好参考价值的文章主要介绍了react将文件转为base64进行上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求

图片、pdf、word、excel等文件进行上传。图片、pdf等调接口A、word、excel等附件调接口B。接口关于文件是base64格式的参数

业务场景

上传资源,区分影像与附件文章来源地址https://www.toymoban.com/news/detail-695125.html

逻辑思路

  1. 使用原生input标签,type='file',进行上传
  2. 上传后的回调,对文件进行分类,影像与附件
  3. 对文件进行base64编码
  4. 执行接口进行上传

代码实现

  1. 点击input进行上传,选择文件后执行onChange回调
<input
  type="file"
  multiple
  ref={uploadInputRef}
  onChange={uploadFileOnChange}
 />
  1. 对文件进行分类,我这里是通过type去判断的
export const uploadFileOnChange = async (e: ChangeEvent<HTMLInputElement>) => {
  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);
    }
  }
};
  1. 对文件进行base64编码
async function readFileAsDataURL(file: Blob) {
  const result_base64 = await new Promise<string>((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: ChangeEvent<HTMLInputElement>) => {
  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,
  };
};
  1. 拿到上一步返回的数据调接口

到了这里,关于react将文件转为base64进行上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js根据base64下载文件

    项目中有个下载模板的需求,接口直接给返回的是一个base64,如图 这里的bytes不是流格式,而是一个base64格式的,这就导致我们需要先将base64转为了流,然后通过new Blob方式下载文件就行,下面看代码 定义了一个base64转二进制流的方法,接下来开始根据得到的二进制流下载文

    2024年02月17日
    浏览(41)
  • 【webpack学习】React项目中webpack.config.js 和 webpack.base.config.js 的区别

    在React项目中,通常使用Webpack作为打包工具。 webpack.config.js 和 webpack.base.config.js 两个文件在项目中的作用是不同的。 webpack.config.js 是Webpack的主要配置文件,它包含了项目的通用配置以及针对不同环境(如开发环境和生产环境)的特定配置。 这个文件包含了整个Webpack配置的

    2024年01月23日
    浏览(50)
  • 再学http-为什么文件上传要转成Base64?

    最近在开发中遇到文件上传采用Base64的方式上传,记得以前刚开始学http上传文件的时候,都是通过content-type为multipart/form-data方式直接上传二进制文件,我们知道都通过网络传输最终只能传输二进制流,所以毫无疑问他们本质上都是一样的,那么为什么还要先转成Base64呢?这

    2024年02月11日
    浏览(29)
  • java实现文件的上传和下载,将文件流转base64返回给前端

    上传代码 文件下载代码 后端通过json拿到文件流的返回,我采用将文件流转成base64返回给前台,实现代码如下:

    2024年02月13日
    浏览(55)
  • 【base64】JavaScript&uniapp 将图片转为base64并展示

    Base64是一种用于编码二进制数据的方法,它将二进制数据转换为文本字符串。它的主要目的是在网络传输或存储过程中,通过将二进制数据转换为可打印字符的形式进行传输  图片大小从1.36MB到169kb 上面的代码中,toDataURL产生的是图片的base64编码,Base64编码必须是完整且正确

    2024年02月11日
    浏览(45)
  • js中实现 base64 与文件格式互转

    通过 reader.readAsDataURL 方法实现 先将 base64 转换成 blob ,再将 blob 转换成 file 文件 👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者

    2024年01月20日
    浏览(40)
  • 【base64码转为图片,并预览】

    开发工具及需求介绍 (1)开发工具:HBuilder (2)数据库:SQLite (3)组件库:uni-app (4)需求:(后端)将图片信息加密,前端接收到的是一个base64码。前端需要利用这些信息,转成 image src=\\\"imageURL\\\"/image 中的imageURL,以便能显示出图片。后端返回的信息,我们必需要的是”图

    2024年02月05日
    浏览(50)
  • React 实现文件分片上传和下载

    文件分片上传是一种将大文件分割成多个小片段进行上传的技术。它的原理是将大文件切割成固定大小的小块,然后逐个上传这些小块,最后在服务器端将这些小块合并成完整的文件。 文件分片上传的机制可以提高上传速度和稳定性。由于大文件的上传可能会受到网络不稳定

    2024年02月13日
    浏览(35)
  • vue+element ui完成头像上传功能(文件转base64)以及自定义布局。

    1、自定义布局       查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图 :                                                    目标效果 :                            在实现

    2024年01月18日
    浏览(44)
  • React Native Expo项目上传文件

              https://chat.xutongbao.top/ https://docs.expo.dev/versions/latest/sdk/document-picker/ https://blog.csdn.net/xutongbao/article/details/131981469?spm=1001.2014.3001.5501 

    2024年02月15日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包