react native上传二进制图片、视频的方法

react native获取本地图片我用的react-native-image-picker,但是它只能获取图片路径,以及base64的图片,不能获取到binary二进制形式的。

一开始我是让后端改造接口,把原本传binary的改成了base64,可是,躲得了初一躲不过十五。

上传视频是不可能走base64这种取巧的途径,于是,怎么把媒体文件转成binary给后端就成为了跨不过的坎。

找了好久的资料,总是能得到以下的的回答:

let formData = new FormData();let file = { uri: uri, type: 'multipart/form-data', name: 'a.jpg' };formData.append("images", file);fetch(url, {method: 'POST',headers: {'Content-Type': 'multipart/form-data',},body: formData,}).then((response) => response.text()).then((responseData) => {console.log('responseData', responseData);}).catch((error) => { console.error('error', error) });

首先这段代码我尝试了许多次都无法把它用multipart/form-data传输,后来发现,不写Content-Type它默认倒是识别正确了!然而第二个问题我始终无法解决,就是uri通过picker拿到的只是个路径,后端是无法将这本地路径去识别成文件的,试了无数次后最终将其放弃。

所以又回到了如何把媒体文件转成binary的问题上。(使用:react-native-fs不知道行不行得通,没试过)反正const response = await fetch(FILE_LOCAL_URL); const blob = await response.blob();是行不通的。

最终,我还是通过npm搜索react native blob找到了组件:react-native-blob-util,通过它的API,总算是把文件成功传给后端接口识别了:

import { getHeader } from './common';
import { launchImageLibrary } from 'react-native-image-picker';
import { base } from '~/utils/base';
import ReactNativeBlobUtil from 'react-native-blob-util';/** 上传图片获取url */
export function fetchUpload(fileModular, cb, isVideo) {launchImageLibrary({ mediaType: isVideo ? 'video' : 'photo' }, async res => {const curFiles = res.assets;if (curFiles) {const m = curFiles[0];if (m.fileSize > 1024 * 1024 * 10) {base.fail('图片过大,请上传10MB以内的图片');} else {base.load();const headers = await getHeader('multipart/form-data');ReactNativeBlobUtil.fetch('POST', `${global.api}/api/upload`, {...headers,}, [{ name: 'file', filename: m.fileName, type: m.type, data: ReactNativeBlobUtil.wrap(m.uri) },{ name: 'fileModular', data: fileModular },]).then((res) => {const json = JSON.parse(res.data)cb(json.data.res);}).catch((err) => {console.log(err)}).finally(() => {base.stop();})}} else {base.fail('请选择图片');}})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773161.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[自研开源] 数据集成之分批传输 v0.7

开源地址:gitee | github 详细介绍:MyData 基于 Web API 的数据集成平台 部署文档:用 Docker 部署 MyData 使用手册:MyData 使用手册 试用体验:https://demo.mydata.work 交流Q群:430089673 介绍 本篇基于…

嵌入式下C/C++调用sqlite3简单开发

交叉编译sqlite3请关注我第一篇博文 sqlite3 交叉编译-CSDN博客 sqlite3的命令的简单使用(增删改查,创建/删除表)请关注我的上一篇博文 sqlite3嵌入式使用以及C/C代码开发-CSDN博客 一、新建文件夹 此文件夹用于放置工程,比如…

Qt实现TFTP Server和 TFTP Client(三)

3.2 Client Client包括下面3个类: ClientSockeTFtpClientTFtpClientWidget 3.2.1 ClientSocke ClientSocke从BaseUdp派生实现write接口. 3.2.1.1 ClientSocke定义 #include "baseudp.h"class QUdpSocket; class ClientSocket : public BaseUdp { pu…

【C++】每日一题 45 跳跃游戏

给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - 1] 的最…

SQLite中的原子提交(四)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite数据库成为内存中数据库&#xff08;三&#xff09; 下一篇&#xff1a;SQLite使用的临时文件&#xff08;二&#xff09; 1. 引言 SQLite等事务数据库的一个重要特性 是“原子提交”。 原子提交意味着所有数据库都在…

深度学习十大算法之图神经网络(GNN)

一、图神经网络的基础 图的基本概念 图是数学中的一个基本概念&#xff0c;用于表示事物间复杂的关系。在图论中&#xff0c;图通常被定义为一组节点&#xff08;或称为顶点&#xff09;以及连接这些节点的边。每个边可以有方向&#xff0c;称为有向边&#xff0c;或者没有方向…

网络原理讲解

目标 网络发展史 独立模式 独立模式&#xff1a;计算机之间相互独立&#xff1b; 网络互连 随着时代的发展&#xff0c;越来越需要计算机之间互相通信&#xff0c;共享软件和数据&#xff0c;即以多个计算机协同工作来完成 业务&#xff0c;就有了网络互连。 网络互连&a…

学习笔记:MYSQL数据库基础知识

MYSQL数据库基础知识学习笔记 MYSQL基础学习数据库相关概念现主流数据库排名数据模型SQL分类SQL数据库基础操作 2024/3/27 学习资料&#xff1a;黑马程序员:MYSQL MYSQL基础学习 数据库和数据库管理系统(DBMS) 数据库: 是存储数据的集合&#xff0c;包括表、视图、索引等对象…

存内计算:释放潜能的黑科技

什么是存内计算&#xff1f; 存内计算技术是一种新型的计算架构&#xff0c;它将存储器和计算单元融合在一起&#xff0c;以实现高效的数据处理。存内计算技术的优势在于能够消除数据搬运的延迟和功耗&#xff0c;从而提高计算效率和能效比。目前&#xff0c;存内计算技术正处…

React Native获取及监听网络状态

在React Native中&#xff0c;要获取和监听网络状态&#xff0c;你可以使用react-native-netinfo库&#xff08;以前是核心库的一部分&#xff0c;但在React Native 0.60之后被移出并作为一个独立的库提供&#xff09;。以下是使用这个库来获取和监听网络状态的基本步骤&#x…

苹果Find My产品需求增长迅速,伦茨科技ST17H6x芯片供货充足

苹果的Find My功能使得用户可以轻松查找iPhone、Mac、AirPods以及Apple Watch等设备。如今Find My还进入了耳机、充电宝、箱包、电动车、保温杯等多个行业。苹果发布AirTag发布以来&#xff0c;大家都更加注重物品的防丢&#xff0c;苹果的 Find My 就可以查找 iPhone、Mac、Ai…

jupyter notebook导出含中文的pdf(LaTex安装和Pandoc、MiKTex安装)

用jupyter notebook导出pdf时&#xff0c;因为报错信息&#xff0c;需要用到Tex nbconvert failed: xelatex not found on PATH, if you have not installed xelatex you may need to do so. Find further instructions at https://nbconvert.readthedocs.io/en/latest/install…

pytorch中的torch.hub.load()

pytorch提供了torch.hub.load()函数加载模型&#xff0c;该方法可以从网上直接下载模型或是从本地加载模型。官方文档 torch.hub.load(repo_or_dir, model, *args, sourcegithub, trust_repoNone, force_reloadFalse, verboseTrue, skip_validationFalse, **kwargs)参数说明&a…

Focal Modulation Networks聚焦调制网络

摘要 我们提出了 焦点调制网络 &#xff08;简称 FocalNets) &#xff0c;其中 自注意&#xff08; SA &#xff09;被 Focal Modulation 替换&#xff0c;这种机制 包括三个组件&#xff1a;&#xff08; 1 &#xff09;通过 depth-wise Conv 提取分级的上下文信息&#xff0…

吴恩达深度学习笔记:浅层神经网络(Shallow neural networks)3.6-3.8

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第三周&#xff1a;浅层神经网络(Shallow neural networks)3.6 激活函数&#xff08;Activation functions&#xff09;3.7 为什么需要非线性激活函数&#xff1f;&#xff08;why need a non…

Spring Cloud 九:服务间通信与消息队列

Spring Cloud 一&#xff1a;Spring Cloud 简介 Spring Cloud 二&#xff1a;核心组件解析 Spring Cloud 三&#xff1a;API网关深入探索与实战应用 Spring Cloud 四&#xff1a;微服务治理与安全 Spring Cloud 五&#xff1a;Spring Cloud与持续集成/持续部署&#xff08;CI/C…

react native hooks 页面出现重绘问题,如何解决

在React Native应用中&#xff0c;使用Hooks导致页面出现频繁重绘或性能问题时&#xff0c;可以尝试以下策略来优化和解决问题&#xff1a; 减少不必要的状态更新&#xff1a; 使用 React.memo 高阶组件包裹那些不需要每次父组件状态改变时都重新渲染的子组件。它通过浅比较pro…

Java Web-Maven

Maven是apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具 Maven的作用 1.依赖管理:方便快捷的管理项目依赖资源(jar包)&#xff0c;避免版本冲突问题 我们有的项目需要大量的jar包&#xff0c;采用手动导包的方式非常繁琐&#xff0c;并且版本升级也…

面试官:2PC和3PC有什么区别?

本文内容已收录至我的面试网站&#xff1a;www.javacn.site 在分布式事务中&#xff0c;通常使用两阶段协议或三阶段协议来保障分布式事务的正常运行&#xff0c;它也是 X/Open 公司定义的一套分布式事务标准。 X/Open 公司是由多家国际计算机厂商所组成的联盟组织&#xff0c;…

【前端】-【性能优化常识】

目录 前端性能优化指标首屏速度、白屏时间性能优化收效很大的操作&#xff1a;减少首屏资源体积收效不大或者特殊情况的优化操作 操作速度、渲染速度造成操作卡顿和渲染慢的场景性能优化 数据缓存 补充知识异步加载加载方式一&#xff1a;prefetch加载加载方式二&#xff1a;sc…