时间戳

首页 > 解决方案 > 如何将我的图片从 react 中存储在 firebase 中？

reactjs - 如何将我的图片从 react 中存储在 firebase 中？

问题描述

嘿，我尝试将用户上传的图片存储在我的 Firebase 存储中。

但我不知道如何访问该文件，因为当我使用 AJAX 发送我的图片时，我在 Node 中收到：blob：http://localhost:3000/f64a37b5-ec9f-4b99-8784-0fe7842e22da。

当我尝试发送它时，它不起作用。

我把代码放在下面：

反应部分-->

uploadPicture(file) {
    const data = new FormData();
    data.append('file', this.uploadInput.files[0]);
    data.append('filename', this.fileName.value);
    console.log(file[0])
    fetch('/upload_picture', {
      method: 'post',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
          "picture": file[0]
      })
    })
}

console.log(file[0]) 让我知道：

File(330479)
  {preview: "blob:http://localhost:3000/c128fe5d-db61-4caa-8851-95e397b67e6a", name: "Capture d’écran 2018-07-27 à 11.34.01.png", lastModified: 1532684046000, lastModifiedDate: Fri Jul 27 2018 11:34:06 GMT+0200 (heure d’été d’Europe centrale), webkitRelativePath: "", …}

  lastModified: 1532684046000
  
  lastModifiedDate: Fri Jul 27 2018 11:34:06 GMT+0200 (heure d’été d’Europe centrale) {}
  
  name: "Capture d’écran 2018-07-27 à 11.34.01.png"
  
  preview: "blob:http://localhost:3000/c128fe5d-db61-4caa-8851-95e397b67e6a"
  
  size: 330479
  
  type: "image/png"
  
  webkitRelativePath: ""
  
  __proto__: File

快递 -->

const express = require('express')
const router = express.Router()

const firebase = require('firebase')
const googleStorage = require('@google-cloud/storage')

const storage = googleStorage({
    projectId: "-------ha",
    keyFilename: "-------------------------WTY"
})

const bucket = storage.bucket("gs://------ha.appspot.com")

router.post('/upload_picture', (req, res) => {
    const file = req.body.picture.preview
    console.log(file)
    bucket.upload(file, function(err, file) {
        if (!err) {
          console.log(`${file} add to firebase`)
        }
        else
            console.log('Error')
      });
})

console.log(file) 呈现我：blob：http://localhost:3000/f64a27b5-ec9f-4b99-8784-0fe7842e22da

当我上传文件时，这会使我出现“错误”。

有人知道怎么了？

标签： reactjsfirebaseexpressuploadgoogle-cloud-storage

解决方案

我建议您使用 Firebase JavaScript SDK，这样您就可以将图像直接从您的反应前端上传到您的云存储，而不是将图像传递到您的节点服务器（https://firebase.google.com/docs/storage/web/start）。首先将 Firebase 安装到您的 react 项目中。

 npm install --save firebase

然后使用适当的设置配置 Firebase 并直接从 react 上传。

import * as firebase from 'firebase';
var config = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket>'
};
firebase.initializeApp(config);

 // Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();
// Create a root reference
var storageRef = firebase.storage().ref();

// Create a reference to 'mountains.jpg'
var exampleRef = storageRef.child('example.jpg');

var file = ... // use the Blob or File 
exampleRef.put(file).then(function(snapshot) {
  console.log('Uploaded a blob or file!');
});

推荐阅读