如何将图像存储在文件服务器中并获取远程 URL 以响应本机应用程序

Posted 2023-03-08

【中文标题】如何将图像存储在文件服务器中并获取远程 URL 以响应本机应用程序

【英文标题】：How can I store an image in a fileserver and get the remote URL for react native application

【发布时间】：2021-09-06 22:33:40

【问题描述】：

我将 expo 用于我的本机应用程序并使用 firestore 数据库进行存储，但问题是我确实需要一个文件服务器，我可以在其中存储图像并获取远程 URL，然后我可以将远程 URL 放入我的 firestore db，但是任何人都可以帮助我了解如何获取文件服务器以及如何将文件服务器与 node.js 一起使用

任何答案将不胜感激， 谢谢， 终端

【问题讨论】：

既然您已经使用 Firebase 进行了标记，您是否考虑过 firebase.google.com/docs/storage？

我会尽快看他们的 :)

【参考方案1】：

以下是从 React Native 上传图片的方法：

import firebase from "firebase/app";
import "firebase/storage";

const storage = firebase.storage();

const urlToBlob = (url) => 
  return new Promise((resolve, reject) => 
    var xhr = new XMLHttpRequest();
    xhr.onerror = reject;
    xhr.onreadystatechange = () => 
      if (xhr.readyState === 4) 
        resolve(xhr.response);
      
    ;
    xhr.open("GET", url);
    xhr.responseType = "blob"; // convert type
    xhr.send();
  );
;

const uploadImage = async (uri, filename) => 
  const storageRef = storage.ref();

  const imageUri = Platform.OS === "android" ? uri : uri.replace("file://", "");
  const blob = await urlToBlob(imageUri);

  await storageRef
    .child("images/" + filename)
    .put(blob);

  return;


// Actuall upload
const fileUri = "file:///var/mobile/Containers/Data/Application/80CD82F2-6626-4828-948E-FC5B1B8236DF/Documents/ExponentExperienceData/user1/images/a12ecb52ce80159a32b142058c059123.jpg"
await uploadImage(fileUri, "a12ecb52ce80159a32b142058c059123.jpg");

为了获取文件 URL（并下载它），您可能需要这个：

import firebase from "firebase/app";
import "firebase/storage";
import * as FileSystem from "expo-file-system";

const storage = firebase.storage();

const downloadImage = async (filepath, targetURI) => 
  const storageRef = storage.ref();
  let downloadURL = false;

  try 
    // Get download link
    downloadURL = await storageRef
      .child(filepath)
      .getDownloadURL();
   catch (err) 
    // The image doesn't exist remotely
  

  // Download image
  downloadURL && (await FileSystem.downloadAsync(downloadURL, targetURI));

  return downloadURL;
;

// Actual download
const url = await downloadImage("images/a12ecb52ce80159a32b142058c059123.jpg", FileSystem.documentDirectory + "images/file1.jpg" );

也可以从 NodeJs 中使用：getDownloadURL(); 来检索远程 url。

【讨论】：

嘿，谢谢你的帮助，但我想要的是图像的远程 URL，它应该以 .jpg or .png 结尾，存储后我怎样才能得到它

见***.com/questions/42956250/…