时间戳

首页 > 解决方案 > 将两个本地存储的 PDF 上传到 REST API

angular - 将两个本地存储的 PDF 上传到 REST API

问题描述

我有一个小的 REST API，它需要两个 PDF 并从Draftable API 返回一个比较 URL。API 已经过测试并且工作正常。由于我是 REST API 和 Angular 的新手，所以在弄清楚如何将两个 PDF 发送到 API 时遇到问题。

这就是我测试我的 API 的方式：在此处输入图像描述

API部分：

@PostMapping("/draftableDemo")
    String compareJob(@RequestParam("file1") MultipartFile file1, @RequestParam("file2") MultipartFile file2) {
        CompareJob compareJob = new CompareJob(convert(file1), convert(file2));
        DraftableCompare draftableCompare = new DraftableCompare();
        return draftableCompare.compare(compareJob);
    }

我发现这个SO 帖子与我有类似的问题。

感谢您的任何提示、想法或建议！

编辑：我的 HTML：

<div class="content"
     fxLayout="row"
     fxLayout.xs="column"
     fxFlexFill>

    <div fxFlex="50" fxFlex.xs="50" style="position: relative">
        <div>
            <div>
                <p>
                    Open first PDF
                </p>
                <input (change)="onFileSelected(pdf1)" type="file" [multiple]="multiple" id="file1">
            </div>

            <div *ngIf="error" class="error mb">
                {{ error.message | json }}
            </div>

            <div *ngIf="!isLoaded && !error && progressData" id="progress1">
                <div class="bg">
                    <div class="bar" [style.width]="progressData.loaded / progressData.total * 100 + '%'"></div>
                </div>
                <span>{{ getInt(progressData.loaded / progressData.total * 100) }}%</span>
            </div>

            <pdf-viewer [src]="pdfSrc1"
                        [(page)]="page"
                        [rotation]="rotation"
                        [original-size]="originalSize"
                        [fit-to-page]="fitToPage"
                        (after-load-complete)="afterLoadComplete($event)"
                        [zoom]="zoom"
                        [show-all]="showAll"
                        [stick-to-page]="stickToPage"
                        [render-text]="renderText"
                        [external-link-target]="'blank'"
                        [autoresize]="autoresize"
                        [render-text-mode]="renderTextMode"
                        (error)="onError($event)"
                        (on-progress)="onProgress($event)"
                        (page-rendered)="pageRendered($event)"
            ></pdf-viewer>
        </div>
    </div>

    <div fxFlex="50" style="position: relative">
        <div>
            <div>
                <p>
                    Open second PDF
                </p>
                <input (change)="onFileSelected(pdf2)" type="file" [multiple]="multiple" id="file2">
            </div>

            <div *ngIf="error" class="error mb">
                {{ error.message | json }}
            </div>

            <div *ngIf="!isLoaded && !error && progressData" id="progress2">
                <div class="bg">
                    <div class="bar" [style.width]="progressData.loaded / progressData.total * 100 + '%'"></div>
                </div>
                <span>{{ getInt(progressData.loaded / progressData.total * 100) }}%</span>
            </div>


            <pdf-viewer [src]="pdfSrc2"
                        [(page)]="page"
                        [rotation]="rotation"
                        [original-size]="originalSize"
                        [fit-to-page]="fitToPage"
                        (after-load-complete)="afterLoadComplete($event)"
                        [zoom]="zoom"
                        [show-all]="showAll"
                        [stick-to-page]="stickToPage"
                        [render-text]="renderText"
                        [external-link-target]="'blank'"
                        [autoresize]="autoresize"
                        [render-text-mode]="renderTextMode"
                        (error)="onError($event)"
                        (on-progress)="onProgress($event)"
                        (page-rendered)="pageRendered($event)"
            ></pdf-viewer>
        </div>
    </div>

</div>




<hr>
<input type="file" [multiple]="multiple" #fileInput>
<file-upload #fu (change)="fu.upload()" [multiple]="true"></file-upload>
<div class="example-button-row">
    <button mat-raised-button color="primary" routerLink="/draftable" (click)="compareDraftable()">Draftable</button>
    <button mat-raised-button color="primary" routerLink="/pdfcompare">PDF compare</button>
    <button mat-raised-button color="primary">Version3</button>
    <button mat-raised-button color="primary">Version4</button>
</div>

和 TS：

export class MainComponent implements OnInit {
    // pdfSrc1: string | PDFSource | ArrayBuffer = './assets/fullText2Page.pdf';
    // pdfSrc2: string | PDFSource | ArrayBuffer = './assets/fullText1Page.pdf';

    leftFile: File = null;
    rightFile: File = null;

    @Input() multiple = true;
    @ViewChild('fileInput') inputEl: ElementRef;

    constructor(private http: HttpClient) {
    }

    pdfSrc1: string | PDFSource | ArrayBuffer = '';
    pdfSrc2: string | PDFSource | ArrayBuffer = '';

    pdf1 = 'pdfSrc1';
    pdf2 = 'pdfSrc2';

    error: any;
    page = 1;
    rotation = 0;
    zoom = 1;
    originalSize = false;
    pdf: any;
    renderText = true;
    progressData: PDFProgressData;
    isLoaded = false;
    stickToPage = false;
    showAll = true;
    autoresize = true;
    fitToPage = false;
    outline: any[];
    renderTextMode = 2;

    @ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;

    ngOnInit(): void {
    }



    /**
     * Render PDF preview on selecting file
     */
    onFileSelected(pdfSource) {
        console.log('Source: ', pdfSource);
        let $pdf: any;

        if (pdfSource === 'pdfSrc1') {
            $pdf = document.querySelector('#file1');
        } else {
            $pdf = document.querySelector('#file2');
        }

        if (typeof FileReader !== 'undefined') {
            const reader = new FileReader();

            reader.onload = (e: any) => {
                if (pdfSource === 'pdfSrc1') {
                    this.pdfSrc1 = e.target.result;
                } else {
                    this.pdfSrc2 = e.target.result;
                }

            };

            reader.readAsArrayBuffer($pdf.files[0]);
        }
    }

    /**
     * Get pdf information after it's loaded
     */
    afterLoadComplete(pdf: PDFDocumentProxy) {
        this.pdf = pdf;
        this.isLoaded = true;
        this.loadOutline();
    }

    /**
     * Get outline
     */
    loadOutline() {
        this.pdf.getOutline().then((outline: any[]) => {
            this.outline = outline;
        });
    }

    /**
     * Handle error callback
     */
    onError(error: any) {
        this.error = error; // set error
    }


    /**
     * Pdf loading progress callback
     */
    onProgress(progressData: PDFProgressData) {
        // console.log('Progress Data: ', progressData);
        this.progressData = progressData;
        this.isLoaded = false;
        this.error = null; // clear error
    }

    getInt(value: number): number {
        return Math.round(value);
    }

    /**
     * Page rendered callback, which is called when a page is rendered (called multiple times)
     */
    pageRendered(e: CustomEvent) {
        // console.log('(page-rendered)', e);
    }

    compareDraftable() {
        const fd = new FormData();
        fd.append('file1', this.leftFile, this.leftFile.name);
        this.http.post('localhost:8080/draftableDemo', fd)
            .subscribe(res => {
                console.log(res);
            });
    }

    upload() {
        const inputEl: HTMLInputElement = this.inputEl.nativeElement;
        const fileCount: number = inputEl.files.length;
        const formData = new FormData();
        if (fileCount > 0) { // a file was selected
            for (let i = 0; i < fileCount; i++) {
                formData.append('file[]', inputEl.files.item(i));
            }
            this.http
                .post('localhost:8080/draftableDemo', formData);
            // do whatever you do...
            // subscribe to observable to listen for response
        }
    }

标签： angularrestspring-boot

解决方案

  • 如何使用它们的代表键在 Angular 端定义两个 PDF？

目前，您已经有两个文件，您需要做的就是通过 POST 查询发送它们

let formData:FormData = new FormData();
formData.append('file1', this.pdfSrc1);
formData.append('file2', this.pdfSrc2);

const req = new HttpRequest('POST', 'localhost:8080/draftableDemo', formData);
  • 我是否必须更改我的 API 的预期？

由于 formData 发送的 PDF 文件具有与 PostMan 完全相同的键名或 API 正在等待的内容，除非 this.pdfSrc1/this.pdfSrc2 的格式不正确，否则应该没问题

  • 我一直在阅读 Angular 文件上传器，每个人都在谈论哪个模块？

这里不需要角度文件上传器或标签

推荐阅读