如何使用带有 JSON 的 Angular/TypeScript 编写上传/下载代码？

Question

我想发送到我的 json api、一个文件以及我如何将此 HTML 字段绑定到我的 component.ts 的属性（例如：'conteudo.file' 或 'file'）并发送到我的 api。

我试试这个方法：

//在component.ts文件中

conteudo: Conteudo[];
editConteudo: Conteudo;

constructor(private contService: ConteudoService) {}

add(conteudo: Conteudo){
    this.contService.addConteudo(this.editConteudo).subscribe();
    console.log('Os dados enviados foram: ', conteudo);
}

//输入服务.ts

private url: string = 'http://localhost:8000/conteudo';
  constructor(private http: HttpClient) { }

  addConteudo(conteudo: Conteudo): Observable<Conteudo>{
      return this.http.post<Conteudo>(this.url, conteudo)
  }

//在component.html文件中

<form (ngSubmit)="add(conteudo)" class="was-validated">
        <div class="mb-3">
            <label for="validationTextarea">Título</label>
            <textarea class="form-control is-invalid" [(ngModel)]="titulo" 
                  name="titulo" placeholder="Required example textarea" 
                  required>
           </textarea>
            <div class="invalid-feedback">
                Please enter a message in the textarea.
            </div>
       </div>
            <button class="btn btn-primary">Enviar</button>
   </form>

//在conteudo.ts文件中

export interface Conteudo {
     id: number;
     titulo: string;
     descricao: string;
     file: string;
 }

//在一个db.json文件中

{
  "conteudo": [
    {
      "id": 1,
      "titulo": "Teste de Controle de Dados",
      "descricao": "Testando controle de arquivos",

      //Here, where I want to pass my file.
      "file": "example.pdf, example.jpg, etc"
    }
  ]
}

Answer 1

您可以对文件进行 base64 编码，以 JSON 格式发送，尽管它的大小会非常大！或者，我认为更好的方法是，您可以将其作为表单数据发送。

addConteudo(conteudo: Conteudo): Observable<Conteudo>{
      let formData = new FormData;
      formData.append("file", conteudo.file)
      return this.http.post<Conteudo>(this.url, formData )
  }

您可以通过以下方式访问该文件。

  <input type="file" name="test" (change)="getFile($event)"/>

getFile(event) {
  let file = event.target.files[0];
}