建材营销型的网站,怎么注册网站的步骤,网站开发与设计开题报告,互助网站制作react native获取本地图片我用的react-native-image-picker#xff0c;但是它只能获取图片路径#xff0c;以及base64的图片#xff0c;不能获取到binary二进制形式的。
一开始我是让后端改造接口#xff0c;把原本传binary的改成了base64#xff0c;可是#xff0c;躲得…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(请选择图片);}})
}
