react-native项目通过华为OBS预签名url实现前端直传

react-native项目通过华为OBS预签名url实现前端直传

后端具体实现参照官方链接：https://support.huaweicloud.com/bestpractice-obs/obs_05_1203.html

抱歉我实在是找不到华为obs预签名url前端直传的demo，自己搞了老半天，而且rn和js的调用方式还有区别，真是搞死人，在这里我给广大前端开发者出一个例子，减轻一些负担

下面是前端实现的一个util

import toast from './toast';
import {Alert} from 'react-native';
import request from './request';/*** 获取预签名url* @param param0* @returns*/
const getPresignedUrlForOBS = ({fileName,mimeType,
}: {fileName: string;mimeType: string;
}) => {return request({url: `/file/getObsUrl?fileName=${fileName}`,method: 'GET',});
};/*** 文件上传到obs* @param param0* @returns*/
const uploadFile = async (file: {uri: string;type: string;fileName: string;
}) => {const {uri, type, fileName} = file;try {// 1. 获取预签名 URL（使用 text 流程验证过的接口）const presignedRes: any = await getPresignedUrlForOBS({fileName: fileName || 'image.jpg',mimeType: type || 'image/jpeg',});if (presignedRes.code !== 200) {toast(presignedRes.msg || '获取签名失败');return;}const signedUrl = presignedRes.data.signedUrl;console.log('Signed URL:', signedUrl);// 2. 关键：使用 fetch 读取本地图片为 Bloblet blob;try {const response = await fetch(uri);blob = await response.blob();// 加强验证：确保读到了数据if (blob.size === 0) {throw new Error('文件读取为空，请检查 uri 是否有效');}console.log('成功读取图片 Blob，大小:', blob.size, '类型:', blob.type);} catch (readError) {console.error('读取本地文件失败:', readError);throw new Error(`无法读取图片文件，请重试。路径: ${uri}`);}// 3. 准备请求头（使用签名时的 Content-Type）const headers = {'Content-Type': type || 'image/jpeg',// 如果后端返回了其他签名头（如 x-obs-*），可合并...presignedRes.data.actualSignedRequestHeaders,};// 4. 使用 fetch 上传（推荐，比 axios 更稳定）const uploadResponse = await fetch(signedUrl, {method: 'PUT',headers,body: blob, // 真正的二进制数据});if (!uploadResponse.ok) {const errorText = await uploadResponse.text();console.error('Upload failed:', errorText);throw new Error(`上传失败: ${uploadResponse.status} ${errorText}`);}console.log('图片上传成功！状态:', uploadResponse.status);// 5. 返回成功结果return signedUrl.split('?')[0];} catch (e) {Alert.alert('上传失败', `${fileName} 上传失败，请重试。`);console.error('OBS Upload Error:', e);return '';}
};// 测试预签名 PUT是否可用
const testTextUpload = async () => {const text ='Hello from OBS test!\nThis is a simple text upload.\nTime: ' +new Date().toISOString();const fileName = 'test.txt';const contentType = 'text/plain'; // 关键：文本类型try {// 1. 请求后端获取预签名 PUT URLconst presignedRes: any = await getPresignedUrlForOBS({fileName,mimeType: contentType,});const signedUrl = presignedRes.data.signedUrl;console.log('获取预签名URL:', signedUrl);// 2. 使用 PUT 上传纯文本const uploadRes = await fetch(signedUrl, {method: 'PUT',headers: {'Content-Type': contentType,...presignedRes.data.actualSignedRequestHeaders,},body: text, // 直接传字符串！});console.log('uploadRes', uploadRes);} catch (error: any) {console.error('上传异常:', error);Alert.alert('错误', error.message || '未知错误');}
};export {uploadFile, testTextUpload};