React-Native开发鸿蒙NEXT-图片上传

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

React-Native开发鸿蒙NEXT-图片上传

原创 悬空八只脚 悬空八只脚 2024年10月30日 10:11 江苏

之前在React-Native开发鸿蒙NEXT(5)

React-Native开发鸿蒙NEXT(5)

悬空八只脚，公众号：悬空八只脚React-Native开发鸿蒙NEXT(5)

里提到了鸿蒙下OSS上传的问题当时没有解决，后来解决了把这事忘记交代了，这里补充一下。后续关于React-Native开发鸿蒙NEXT一些技术输出不再以编号命名，基本会以技术点为标题便于查找，尽量多聊些干货

由于阿里云OSS没有HarmonyOS NEXT版本的SDK，只能使用web直传方式来实现RN端的图片上传，事实上阿里云对于HarmonyOS NEXT的最佳实践也是基于web直传来实现的。

(网址:

help.aliyun.com/zh/oss/use-…)

HarmonyOS NEXT的最佳实践help.aliyun.com/zh/oss/use-…

这里结合下实际项目来整体说明下图片上传流程。

图片的选取项目中使用的是react-native-image-picker

(网址:

gitee.com/react-nativ…)

react-native-image-pickerhttps://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-picker.md

实测发现如果相片高宽大于2000会出现报错的问题，最好限制一下尺寸

import {
  launchImageLibrary,
  launchCamera,
  ImageLibraryOptions,
  CameraOptions,
} from 'react-native-image-picker';
......

    // 测试最高宽高2000就会报500错误，这里用1500
    launchImageLibrary(
      {
        mediaType: 'photo',
        maxWidth: 1500,
        maxHeight: 1500,
        quality: 1,
        selectionLimit: 1,
      },
      .......

通过相机或者相片库返回的数据格式如下：

{
  "assets": [{
      "fileName": "screenshot_20240807_122206.jpg",
      "type": "jpg",
      "fileSize": 1467676,
      "originalPath": "file://media/Photo/1/IMG_1723004626_000/screenshot_20240807_122206.jpg",
      "height": 200,
      "width": 200,
      "uri": "/data/storage/el2/base/haps/entry/cache/rn_image_picker_lib_temp_a5421e0c-f687-4f76-9567-13147cc1a9bf.jpg"
  }]
}

上传必须用到的字段是fileName和uri。项目中图片的上传是基于调用后台接口做的Form表单提交，这里列举下Form的结构，去除了项目相关的业务内容

import FS from 'react-native-fs';
//上传
export async function upload(uri: string, fileName: string) {
  try {
    const filecontent = await FS.readFile(uri, 'base64');
    // convertBase64UrlToBlob(filecontent);

    const body = new FormData();
    // File64是后台业务定义的文件内容接收字段
    body.append('File64', filecontent);
    body.append('FileName', fileName);
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body,
    };
    const resp = await fetch(省略请求接口, options);
    const text = await resp.text();
    const json = JSON.parse(text);
    // 如果请求失败
    ...省略业务异常
    return json;
  } catch (e) {
    ...省略异常处理
  }
}

其中利用react-native-fs来根据uri获取文件内容。

(网址:

gitee.com/react-nativ…)

react-native-fshttps://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-fs.md

convertBase64UrlToBlob方法用来将获取到的base64格式文件内容转化为Blob，具体是否需要得看后台小伙伴的定义。网上查找到的资料转化后结果与基于在线转化的结果不一致，可以直接使用下面的方法。

function convertBase64UrlToBlob(base64: string) {
  try {
    let type = base64.split(',')[0].match(/:(.*?);/)[1];//提取base64头的type如 'image/png'
    let bytes = atob(base64.split(',')[1]);//去掉url的头，并转换为byte (atob:编码 btoa:解码)
    //处理异常,将ascii码小于0的转换为大于0
    //let ab = new ArrayBuffer(bytes.length);//通用的、固定长度(bytes.length)的原始二进制数据缓冲区对象
    let ia = new Uint8Array(bytes.length);
    for (let i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i);
    }
    let blob = new Blob([ia], {type: type});
    // console.log(blob);
    return blob;
  } catch (e) {
    ...省略异常处理
  }
}

建议将上传做成接口请求形式，避免暴露oss的accessKey和secret。

---

更多内容可关注

我的公众号悬空八只脚