首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何从Angular中将图像作为斑点发送?

如何从Angular中将图像作为斑点发送?
EN

Stack Overflow用户
提问于 2019-03-09 20:33:32
回答 4查看 10.5K关注 0票数 3

我使用文件输入标记来获取图像文件。现在,我希望将其作为blob发送,并将其作为字符串存储在数据库中。我将检索它并通过get调用将其呈现为图像。

但是如何将图像作为blob发布呢?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2020-12-31 05:54:26

您可以像这样上传文件:

TS

代码语言:javascript
复制
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Component, OnInit } from '@angular/core';



@Injectable({
    providedIn: "root"
})
export class UploadService {

    constructor(private httpClient: HttpClient) {
    }

  
    public uploadFile<T>(file: File): Observable<T> {
        let formData = new FormData();
        formData.append('file', file, file.name);

        var request = this.httpClient
            .post<T>(
                "url/to/backend/upload",
                formData
            );
        return request;

    }

}


@Component({
  selector: 'app-carga',
  templateUrl: './carga.component.html',
  template:
  `
           <input class="form-control" #fileInput type="file" [multiple]="false"/>
     <button type="button" class="btn btn-outline-success"
    (click)="uploadFile(fileInput)">Cargar</button>
  `

})
export class CargaComponent implements OnInit {

  constructor(public uploader: UploadService) {
  }

  ngOnInit(): void {
  }
  public uploadResult?: any;

  async uploadFile(fileInput: any) {
    let files: File[] = fileInput.files;
    if (files.length < 1) {
      return;
    }

    let file = files[0];
    try {

      this.uploader.uploadFile(file)
    .subscribe(result => {
      console.log(result);
      fileInput.value = null;
    },
      error => {
        console.error(error);
      })

    } catch (error) {

      console.warn("File upload failed.");
      console.error(error);

    }
  }

}
票数 2
EN

Stack Overflow用户

发布于 2019-03-09 21:00:52

I agree with comment above . This is an example for you

或者您可以使用dataForm,如下所示:

代码语言:javascript
复制
 uploadPicture(formData: FormData, code: string) {
    // /** In Angular 5, including the header Content-Type can invalidate your request */
    const headers = new HttpHeaders();
    headers.append('Content-Type', null);
    headers.append('Accept', 'application/json');
    const options =  {
        headers: headers
    };

    const url = this.xxxServiceURL + '/custom/xxx/uploadPicture/' + code;
    return this.httpClient.post(url, formData, options);
}
票数 2
EN

Stack Overflow用户

发布于 2019-03-09 20:54:15

从这个reference

你的'getBlob‘服务:

代码语言:javascript
复制
getBlobThumbnail(): Observable<Blob> {  
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  });
  return this.httpClient.post<Blob>(this.thumbnailFetchUrl,
    {
      "url": "http://acs/container/Logo.png"
    }, {headers: headers, responseType: 'blob' as 'json' });
}

和你的组件:

代码语言:javascript
复制
imageBlobUrl: string;
getThumbnail() : void {
  this.ablobService.getBlobThumbnail()
    .subscribe(
      (val) => { 
        this.createImageFromBlob(val);
      },
      response => {
        console.log("POST in error", response);
      },
      () => {
        console.log("POST observable is now completed.");
      });
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55077393

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档