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

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

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

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

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

javascript 复制代码
  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,总算是把文件成功传给后端接口识别了:

javascript 复制代码
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('请选择图片');
    }
  })
}
相关推荐
前端爆冲1 分钟前
项目中无用export的检测方案
前端
旧味清欢|12 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾29 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin40 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js