jpg图片文件OSS上传后打不开

Question

React Native 0.70应用程序使用

react-native-blob-util

从图像选择器中读取jpg图像文件，然后将其上传到OSS。这是代码：

import ReactNativeBlobUtil from "react-native-blob-util"; //v0.19
const fileData = await ReactNativeBlobUtil.fs.readFile(filePath, 'base64'); //filePath is the file path from image picker
const fileData1 = `data:image/jpeg;base64,${fileData}`

fileData1

已上传

fetch

：

const response = await fetch(preSignedUrl, {. //preSignedUrl is acquired from backend node server
    method: 'PUT',
    headers: { 'Content-Type': 'image/jpeg' },
    body: fileData1,
  })

上传的图片无法打开。

fetch PUT

之前的md5(fileData1)与OSS返回的md5相同。可能和OSS上的jpg文件格式有关，但不知道问题出在哪里。

Answer 1

您正在使用预签名 URL 将 Base64 编码的图像数据直接上传到OSS（对象存储服务）。

当您以 Base64 编码文件内容并在前面添加数据 URL 架构 (

data:image/jpeg;base64

) 时，它适合将图像直接嵌入到网页或 CSS 文件中（例如，请参阅“如何在 HTML 中显示 Base64 图像？”） ).
但是，为了上传到OSS，您应该将base64转换回二进制数据，因为存储需要图像的原始二进制格式，而不是其base64编码的表示形式。

因此您需要在上传之前将base64编码的字符串转换回二进制。这可以使用

Blob

或

Buffer

API 来完成，但由于您在 React Native 环境中工作，因此您必须依赖那里可用的内容。不幸的是，React Native 没有与 Web 浏览器相同的全局

Blob

构造函数，但

react-native-blob-util

提供了一种解决方法。

import ReactNativeBlobUtil from "react-native-blob-util";

// Step 1: Convert base64 to binary
const blob = await ReactNativeBlobUtil.base64ToBlob(fileData);

// Step 2: Upload the blob
const response = await fetch(preSignedUrl, {
  method: 'PUT',
  headers: { 'Content-Type': 'image/jpeg' },
  body: blob, // Use the blob directly
});

您需要确保

base64ToBlob

正确地将base64字符串转换为

fetch

可以处理的二进制格式。如果

react-native-blob-util

不直接支持

base64ToBlob

，您可能需要使用

fetch

从 base64 字符串创建 blob，例如：

// Convert base64 to blob using fetch
const response = await fetch(fileData1);
const blob = await response.blob();

// Then upload this blob as before