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

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('请选择图片'); } }) }