当前位置: 首页 > news >正文

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.lryc.cn/news/326085.html

相关文章:

  • JVM之堆
  • R语言实现——网状 Meta 分析
  • Java项目:77 springboot母婴商城
  • 【排序算法】深入解析快速排序(霍尔法三指针法挖坑法优化随机选key中位数法小区间法非递归版本)
  • 生成微信小程序二维码
  • 网络编程(1)写一个简单的UDP网络通信程序【回显服务器】,并且实现一个简单的翻译功能
  • Ansys Speos | Light Expert Group探测器组使用技巧
  • C#学习笔记3:Windows窗口计时器
  • C语言与sqlite3入门
  • Rancher(v2.6.3)——安装Rancher
  • Aapche Nutch建立自己的搜索引擎
  • 阅读笔记(ICIP2023)Rectangular-Output Image Stitching
  • 就业班 第二阶段 2401--3.26 day6 Shell初识 连接vscode
  • 碳课堂|什么是碳资产?企业如何进行碳资产管理?
  • 如何使用 ChatGPT 进行编码和编程
  • 学习java第二十四天
  • 中小型集群部署,Docker Swarm(集群)使用及部署应用介绍
  • gateway做负载均衡
  • pytorch中的torch.hub.load()
  • R语言学习——Rstudio软件
  • 触发器的工艺结构原理及选型参数总结
  • Hana数据库 No columns were bound prior to calling SQLFetch or SQLFetchScroll
  • DevOps是什么
  • windows下的vscode + opencv4.8.0(C++) 配置
  • 微信小程序之多视频暂停播放,超出可视区域停止播放视频在自定义组件中实现案例
  • Java 加载外部 Jar 中的类并通过反射调用类中的方法
  • Arduino+ESP8266+华为云物联网平台实现智能开关
  • 使用 python 拆分 excel 文件
  • uniapp小程序中onShareAppMessage(OBJECT)实现带参数的分享功能
  • 5个免费的3D钣金CAD软件