file-upload 相关问题

HTML 上传文件 HTML <div class="row"> <div class="mb-6"> <label class="form-label" for="defaultFile">Upload file</label> <input type="file" class="form-control" id="defaultFile" (change)="onChange($event)"> <hr> <button type="button" class="btn btn-outline-theme" (click)="uploadFile()">Upload</button> </div> </div> 打字稿 import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-file-upload', templateUrl: './file-upload.component.html', styleUrl: './file-upload.component.scss' }) export class FileUploadComponent { fileToUpload: File | null = null; constructor(private http: HttpClient) { } onChange(event:any) { this.fileToUpload = event.target.files[0]; } uploadFile() { if (!this.fileToUpload) { alert('No file selected.'); return; } const formData: FormData = new FormData(); formData.append('file', this.fileToUpload, this.fileToUpload.name); return this.http.post("<ENDPOINT TO UPLOAD THE FILE>", formData).subscribe( (response) => { console.log(response); }, (error) => { console.error(error); } ); } } 文件上传工作正常。不确定清除文本框的“角度”方式是什么。（为了保持这篇文章的简单性，我将调用 API 的代码移至组件，并删除了所有错误处理等以捕获要点。）为了简单起见，我们可以在html中使用模板引用变量#input，将元素引用传递到函数中并清除值，使用input.value = null 为了简单起见，我删除了 API 调用，并将其替换为 of(true) 来模拟和 API 调用！ import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { of } from 'rxjs'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, template: ` <div class="row"> <div class="mb-6"> <label class="form-label" for="defaultFile">Upload file</label> <input type="file" class="form-control" id="defaultFile" (change)="onChange($event)" #input> <hr> <button type="button" class="btn btn-outline-theme" (click)="uploadFile(input)">Upload</button> </div> </div> `, }) export class App { fileToUpload: File | null = null; constructor() {} onChange(event: any) { this.fileToUpload = event.target.files[0]; } uploadFile(input: any) { if (!this.fileToUpload) { alert('No file selected.'); return; } const formData: FormData = new FormData(); formData.append('file', this.fileToUpload, this.fileToUpload.name); return of(true).subscribe( (response: any) => { console.log(response); input.value = null; // <- changed here! }, (error: any) => { console.error(error); } ); } } bootstrapApplication(App); Stackblitz 演示

angular typescript file-upload

回答 1 投票 0

如何在 Node 中使用“fs”将 FormData 图像文件保存到本地

我有一个 React 前端，允许用户使用 FormData() 将图像发送到节点后端。在 Express 后端的控制器中，我使用 multer 作为中间件来将图像抓取到 fi...

node.js image express file-upload fs

回答 2 投票 0

上传到S3的图像在打开时显示缺少图像图标

我对使用AWS非常陌生（实际上是几天前），并且正在尝试使用API网关将图像上传到S3存储桶。我正在 YouTube 上关注此教程，其中展示了如何设置所有内容...

amazon-web-services amazon-s3 file-upload aws-api-gateway

回答 1 投票 0

在supabase上上传文件：错误RequestInit：发送正文时需要双工选项

我正在尝试使用node.js 在supabase 上上传文件，但出现此错误： RequestInit：发送正文时需要双工选项。我不知道这意味着什么。我的代码做错了什么？柔...