Kendo Ui Angular 文件上传

Question

我在使用 Kendo Ui Angular 的 kendo-upload 时遇到一个问题。 [saveUrl] 和 [removeUrl] 应在 kendo-upload 中给出。但我将项目分为服务部分和组件部分。我想自己编写上传逻辑。 这是 home.component.ts

  //Variables Upload files (Modal)
    public openedUploadFilesModal = false;
    public fileSource: FileInfo[] = [];

    
    public uploadFiles(event:UploadEvent): void {
        debugger;
        if (this.fileSource) {
            const fileViewCreateModel = new FileViewCreateModel();
            fileViewCreateModel.file = event.files;
            fileViewCreateModel.filePath = this.toCollectPath();
       
            this._serviceFile.addFile(fileViewCreateModel).subscribe({
                next: (response) => {
       
                    this.getAll(this.skip, this.pageSize)
                    this.clearSelectFiles();
                },
                error: (err) => {
       
                    this.getAll(this.skip, this.pageSize)
                    this.clearSelectFiles();
                },
            });
        }
    }

    //Function Get select file in fileSource
    handleFileSelected(event: SelectEvent) {
        const newFiles = event.files.filter(
            (f) => !this.fileSource.find((existingFile) => existingFile.name == f.name)
        );
        this.fileSource = [...this.fileSource, ...newFiles];
    }

    successEventHandler(e: SuccessEvent) {
        console.log('The ' + e.operation + ' was successful!');
      }

    handleFileRemoved(event: RemoveEvent) {
        this.fileSource = this.fileSource.filter((f) => event.files.indexOf(f) === -1);
    }

    public clearSelectFiles():void{
        this.fileSource=[];
    }

    //Function (Button) opne Upload file Modal
    public opneUploadFileModal(): void {
        this.openedUploadFilesModal = true;
    }

    //Function Close Upload Files Modal
    public closeUploadFilesModal(): void {
        this.openedUploadFilesModal = false;
    }

这是 home.component.html

<!--begin:: Modal Upload Files-->
    <div>
        <kendo-dialog title="Upload files" *ngIf="openedUploadFilesModal" (close)="closeUploadFilesModal()"
            [minWidth]="250" [width]="450">
            <kendo-upload [autoUpload]="false" (select)="handleFileSelected($event)" 
                (clear)="clearSelectFiles()"
                (remove)="handleFileRemoved($event)" 
                (upload)="uploadFiles($event)"
                >
            </kendo-upload>

           
        
        </kendo-dialog>
    </div>
    <!--end:: Modal Upload Files-->

这是文件-api.sservice.ts

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { FileCreateModel } from './models/file/file.create-model';
import { Observable, catchError } from 'rxjs';
import { FileDeleteModel } from './models/file/file.delete-model';
import { FileEditModel } from './models/file/file.edit-model';

@Injectable({ providedIn: 'root' })
export class FileApiService {
    //Variable HttpClient Inject
    private client: HttpClient = inject(HttpClient);

    //Variable Backend URL
    private url: string = 'api/file';

    //Function (request) Upload File
    public addFile(file: FileCreateModel): Observable<boolean> {
        const formData: FormData = new FormData();
        formData.append('File', file.file[0].rawFile!);

        return this.client.post<boolean>(`${this.url}?filePath=${file.filePath}`, formData);
    }

此文件创建模型

import { FileInfo} from '@progress/kendo-angular-upload';
export interface FileCreateModel{
    filePath:string;
    file:FileInfo[];
}

为什么即使我没有指定[saveUrl]它还是发送请求？

Kendo Ui Angular，kendo-upload

Answer 1

我很好奇，当您设置

[autoUpload]="false"

时，它应该呈现两个按钮...Clear和Upload。这甚至出现在你的表格中吗？

但这是另一个问题，如果您设置

[autoUpload]="true"

并在

uploadFiles

处理程序中，您应该调用

e.preventDefault();

。

uploadFiles(e: UploadEvent): void {
  ...
  e.preventDefault();
}

这不会触发请求。但是，这样做不会显示您选择上传的文件。

上传组件似乎是一个很大的缺点。

希望这有帮助。