Question

我想在firebase中保存一个简单的帖子，但是我没有用图片来保存它

现在，我的服务

uploadAndSave(item: any) {
   let post = { $key: item.key, title: item.title, description: item.description, url: '', fullPath: '' };

if(post.key) {
  this.save(post);
} else {
  let storageRef = this.fb.storage().ref();
  let basePath = `/posts/${new Date()}`;              // Path Where I want to save the image
  post.fullPath = basePath + '/' + post.title + '.png';

  let uploadTask = storageRef.child(post.fullPath).putString(post.fileToUpload, 'base64');
  console.log(uploadTask)
  this.db.list(`${this.PATH}/`).push(post);
  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  (snapshot) => {
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log(progress + "% done");
  },
  (error) => {
    console.error(error);
  },
  () => {
    post.url = uploadTask.snapshot.downloadURL;
    this.save(post);
  });
}
}


    private save(post: any) {
    return new Promise((resolve, reject) => {
      if (post.key) {
        this.db.list(this.PATH)
          .update(post.key, { title: post.title, description: post.description, url: post.url, fullPath: post.fullPath })
          .then(() => resolve())
          .catch((e) => reject(e));
      console.log(post)
      } else {
        this.db.list(this.PATH)
          .push({ title: post.title, description: post.description, url: post.url, fullPath: post.fullPath })
          .then(() => resolve());
      }
    })
  }

这是我对图像，标题和描述的看法，我需要保留所有这些数据，但是somithing是错误的

<img [src]="imageUrl" alt="" id="image-post">
<input type="file" accept="image/*" (change)="handleFileInput($event.target.files)">


<button type="submit" class="waves-effect teal lighten-1 btn" [disabled]="!form.valid" (click)="createPost()">CRIAR</button>
<a routerLink="/painel/postagens" class="waves-effect red darken-1 btn">CANCELAR</a>

现在，这是我的组件

  createPost() {
if(this.form.valid)
  this.service.uploadAndSave(this.form.value)
        .then(() => {
          swal("Postagem criada!", "Esta postagem foi inserido no Banco de Dados com sucesso!", "success");
        })
        .catch((e) => {
          swal("Não foi possível salvar a postagem!");
          console.error(e);
        });
   }



handleFileInput(file: FileList) {
     this.fileUpload = file.item(0);
if (this.fileUpload.type.match('image.*')) {
  var reader = new FileReader();
  reader.onload = (event:any) => {
    this.imageUrl = event.target.result;
  }
  reader.readAsDataURL(this.fileUpload);

   } else {
      swal('Tipo de arquivo não aceito!');
   }
 }

没有图像我可以将数据保存在firebase中，但是当我尝试使用图像保存时，它会给出错误并且很抱歉这么多代码是我不知道的部分代码我错了

Answer 1

您需要在该功能中上传图像，您只需阅读它即可。关于firebase的官方文档：

要将文件上传到云端存储，首先要创建对文件完整路径的引用，包括文件名：

// Create a root reference
var storageRef = firebase.storage().ref();

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

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

// While the file names are the same, the references point to different files
mountainsRef.name === mountainImagesRef.name            // true
mountainsRef.fullPath === mountainImagesRef.fullPath    // false

添加文件元数据：

// Create file metadata including the content type
var metadata = {
  contentType: 'image/jpeg',
};

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);

管理上传：

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file);

// Pause the upload
uploadTask.pause();

// Resume the upload
uploadTask.resume();

// Cancel the upload
uploadTask.cancel();

有关其他信息，请访问网站：https://firebase.google.com/docs/storage/web/upload-files

上传Image Angular 5

1 个答案: