Question

我试图将文件（视频和缩略图）发布并提交到服务器，但是由于后端期望的结构，我遇到了问题。当我从邮递员那里进行操作时，它的外观和工作方式如下：

{'name': ['Blabla'], 'user': ['8c3a636c-9d08-453d-9e59-7a0ec93200c4'], 'file': [<InMemoryUploadedFile: SampleVideo_1280x720_1mb.mp4 (video/mp4)>]}>

我在传递这样的文件时遇到麻烦，不知道该怎么做。我试图这样做：

videoFile: File[] = [];
thumbnailFile: File[] = [];
files: File[] = [];

readVideoUrl(event:any) {
      this.videoFile = [];
        const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        const files: FileList = target.files;
        if (files) {
            this.videoFile.push(files[0]);
            this.videoModel.name = files[0].name;
        }


        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();

            reader.onload = (event: ProgressEvent) => {
                this.videoUrl = (<FileReader>event.target).result;
            }

            reader.readAsDataURL(event.target.files[0]);
        }
    }

readThumbUrl(event:any) {
    this.thumbnailFile = [];
    const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
    const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
    const files: FileList = target.files;
    if (files) {
        this.thumbnailFile.push(files[0]);
    }

    if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();

        reader.onload = (event: ProgressEvent) => {
            this.thumbUrl = (<FileReader>event.target).result;
        }

        reader.readAsDataURL(event.target.files[0]);
    }
}

我传递了模型和文件：

this.campaignService.createVideo(this.videoModel, this.files)
                  .subscribe(
                      (response: any) => {
                      },
                      (error) => {
                          console.log(error);
                      }
                  );

这是问题，我该如何使用表单数据从上方创建结构，我以前是这样做的：

postMultipart(url: string, data: any, files: File[]) {
        const formData: FormData = new FormData();

        // I understand this stringify is part of the issue, 
        // just put the code as it is at the moment.
        formData.append('data', JSON.stringify(data));
        for (const file of files) {
            formData.append(file.name, file);
        }
        const result = this.http.post(url, formData)
            .pipe(map((response: Response) => {

                    return response;
                    // }
                }),
                catchError(response => this.handleError(response))
            );
        return result;
    }

但这会传递字符串之类的所有内容，而后端并不期望这样。 如何获取此信息（这只是视频，缩略图是图像）：

{'file': [<InMemoryUploadedFile: SampleVideo_1280x720_1mb.mp4 (video/mp4)>]}>

Angular 6-上传文件

0 个答案: