如何获取 Angular 9 中任何文件的字节，将其存储在一个对象中并 post 它到 WebAPI 控制器？

Question

我想知道是否可以 select 多个文件并将每个文件的每个字节存储到对象列表中并将其发送到 .net webapi 控制器？我一直在寻找这样的例子，但我没有找到任何例子。如果您能提供帮助，我将不胜感激。谢谢！！

Answer 1

通过使用 <form> 和 <input type="file"...> 以及 multiple="multiple" 到 select 多个文件来构建您的文件数组：

<form>
    <input type="file" name="filefield" multiple="multiple" (change)="fileChanged($event.target.files)">
</form>

并在您的 .ts 中：

export class MyClass {

    constructor(private http: HttpClient) {}

    async fileChanged(filesList: FileList) {
        const formData: FormData = new FormData();
        
        for (let i = 0; i < filesList.length; i++) {
            const fileToUpload = filesList.item(i);
            formData.append(`file${i}`, fileToUpload, fileToUpload.name);
        }
    
        // submit the form or send it using httpClient
        this.http.post('/api_url', formData);
    }
}

如果您想手动读取文件并构建 http 请求正文（不使用 <form> 和 <input type="file"...> 元素，您可以使用此功能：

function getBase64(file: File) {
    return new Promise((resolve, reject) => {
        if (!file) {
            reject('file object is null');
    }

        var reader = new FileReader();

        reader.onloadend = function () {
            resolve({ res: reader.result, name: file.name });
        };
        reader.readAsDataURL(file);
    });
}

但是，不建议这样做。

如何获取 Angular 9 中任何文件的字节，将其存储在一个对象中并 post 它到 WebAPI 控制器？

How to get bytes of any file in Angular 9, store it in an object and post it to a WebAPI controller?

.net

angular

webapi