上一篇我们对服务端和阿里云oss的配置及前端调用做了简单的介绍，但是一直报错。最终判断是文件格式问题，通常我们在reactnative中用formData上传，

formData.append('file', {uri: file, name: nameType(type), type: 'multipart/form-data'});

这里的file是文件的本地路径，如"file://android_asset/文件名"，这里注意file://在安卓选择后并没有，需要我们来进行添加。但事实证明这里并不能直接通过路径上传，而是需要对文件进行处理，转为二进制数据，我们这里选择的是'rn-fetch-blob'库。选择这个库的原因有两个，一是blob比ArrayBuffer存储的二进制数据更大比较适合不定大小的文件对象，而是我们采用的网络请求库 axios或者fetch在请求大文件时不是特别稳定，因此RNFetchBlob.fetch将是更好的选择。

Blob 与 ArrayBuffer的区别

• Blob和ArrayBuffer都能存储二进制数据。Blob相对而言储存的二进制数据大（如File文件对象）。
• ArrayBuffer对象表示原始的二进制数据缓冲区，即在内存中分配指定大小的二进制缓冲区（容器），用于存储各种类型化数组的数据，是最基础的原始数据容器，无法直接读取或写入， 需要通过具体视图来读取或写入，即TypedArray对象或DataView对象对内存大小进行读取或写入；Blob对象表示一个不可变、原始数据的类文件对象。
• ArrayBuffer 是存在内存中的，可以直接操作。而 Blob 可以位于磁盘、高速缓存内存和其他不可用的位置。

 通过比较我们确定了文件格式，那么接下来上代码。

export const uploadFileToOSS = async (files: Array<string>,type: string,
): Promise<any[]> => {const ossConfig = await globalStore.getOssConfig();let saveFiles: any[] = [];rootStore.globalIndicator.changeStatus(true)for (const fileOne of files) {try {const filePath = `${ossConfig.dir}${Date.now()}_${nameType(type)}`;let fileLength = 0;const fileConfigs = [{ name: 'policy', data: ossConfig.policy },{ name: 'x-oss-signature', data: ossConfig.signature },{ name: 'x-oss-signature-version', data: ossConfig.version },{ name: 'x-oss-credential', data: ossConfig.x_oss_credential },{ name: 'x-oss-date', data: ossConfig.x_oss_date },{ name: 'x-oss-security-token', data: ossConfig.security_token },{ name: 'key', data: filePath },{ name: 'success_action_status', data: '200' },{name: 'file',filename: nameType(type),data: RNFetchBlob.wrap(fileOne)}];const res = await RNFetchBlob.fetch('POST',ossConfig.host,{ 'Content-Type': 'multipart/form-data;' },fileConfigs).uploadProgress((written, total) => {fileLength = total;const progress = Math.round((written / total) * 100);console.log(`已上传: ${progress}%`);});if (res?.info().status === 200) {const fileName = fileOne.substring(fileOne.lastIndexOf('/') + 1) || nameType(type);const params = {fileDir: ossConfig.dir,fileLength,fileName,filePath,mimeType: mimeType(type)};const result = await globalStore.saveUploadFile(params);console.log("result.data>", result.data);if (result.success) {saveFiles.push(result.data);}}} catch (error) {console.error('上传失败:', error);xmToast.fail('上传失败，请重试');}}rootStore.globalIndicator.changeStatus(false)return saveFiles;
};

此处强调几点注意事项：

1、rootStore.globalIndicator.changeStatus(true) 这是我写的一个全局的加载loading，可直接忽略，用自己的即可。

2、阿里云oss上传成功后，没有回调。

我们需要拼接出文件地址,我代码中是这样的。

`${ossConfig.host}}${ossConfig.dir}${Date.now()}_${nameType(type)}`

最终是这样的  http://xmgj2025-test.oss-cn-hongkong.aliyuncs.com/424234324_img.png

3、阿里云oss上传后的文件地址不能直接打开查看，而是直接下载了 。

这就造成了很大的不便。因此我们通过保存文件到我们的后端，由后端下载后通过我们的服务地址来预览，这样便可完美解决不能直接预览的问题了。

4、代码中我适配了同时上传多个文件，用到了循环，切记！！这里需要循环上传文件到oss，并且在上传后要掉接口保存文件到后端服务器，for循环不会等待异步完成，与我们的需要不否，因此我采用了for of 进行顺序上传。当然你也可以用map。

好了，通过上面的代码，我们已经可以顺利的上传文件到阿里云oss服务器了！

欢迎各位猿友提问，如果觉得写的不错，请留下你的赞哦！