Question

我已经写了上周上传图像的代码，在Desktop上运行良好。但是它不能在手机上工作。我已经在Java中给出了调试点，当我单击“提交”时，调试器就不会进入Java控制器本身。

HTML：

<form (ngSubmit)="onSubmit()" #studentForm="ngForm" class="form-horizontal" >
   <input type="file" (change)="selectFile($event)">
   <button type="submit" class="btn btn-success" [disabled]="!inspectionForm.form.valid">
        <i class="fa fa-floppy-o" aria-hidden="true"></i> Save
   </button>
</form>

组件TS：

   selectFile(event) {
       this.selectedFiles = event.target.files;
     }

    onSubmit() {
        . . .
        . . .
        . . .
        this.myService.create(this.model, this.fileupload.selectedFiles.item(0))
        this.location.back()
   }

服务TS：

 create2(student: Student, file: File)  {
           this.pushFileToServer(file, student).subscribe(event => {
             . . .
             . . .
             . . .
           })
     }

    pushFileToServer(file: File, student: Student) {
        const formdata: FormData = new FormData();
        const studentString = JSON.stringify(student.notifications);

        formdata.append('file', file);
        formdata.append('name', student.name);
             . . .
             . . .
             . . .
        return this.http.post("/api/student/create", formdata);
    }

Java控制器（春季启动和SQL Server）：

    @PostMapping("/api/student/create")
    public ResponseEntity<String> create(@RequestParam("file") MultipartFile file,
            @RequestParam("name") String name) {

            . . .
            . . .
            . . .
            image.setFilename(file.getOriginalFilename());
            try {
                image.setImageStream(file.getInputStream());
            } catch (IOException e) {
                e.printStackTrace();
            }
            image.setSize(Math.toIntExact(file.getSize()));
            imageService.create(image);

}

新方法-错误：TypeError：dataURI.split不是函数

HTML：

<input type="file" (change)="onFileChange($event)">

组件TS： selectedFile：文件；

onSubmit() {
    // some code - logic
    this.studentService.create(this.model, this.selectedFile);

}

onFileChange(event) {
    console.log(event.target.files[0]);
    this.selectedFile = event.target.files[0];
}

服务TS：

create(student: Student, file: File)  {
       this.pushFileToServer(file, student).subscribe(event => {
       })
 }

pushFileToServer(file: File, student: Student) {
    const formdata: FormData = new FormData();
    const notificationString = JSON.stringify(student.notifications);
    let imgBlob = this.dataURItoBlob(file);

    formdata.append('file', file);

    return this.http.post("/api/student/create", formdata);
}

dataURItoBlob(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var array = [];
    for (var i = 0; i < dataURI.length; i++) {
      array.push(dataURI.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {
      type: mimeString
    });
}

Answer 1

为了使Angular发送HTTP请求，您需要.subscribe到Observable，就像这样：

onSubmit() {
    // some code - logic
    this.studentService.create(this.model, this.selectedFile).subscribe((res) => {
       // This will execute once the HTTP call has returned.
       console.log("Success");
    });
}

Answer 2

我忘了向大家更新...为此表示歉意。真正的错误在于弹簧配置。 spring的默认属性是上传1MB。但是我手机上的照片大约有5MB。因此，一旦我更改了文件上传大小，它就可以在Angular端进行任何代码更改。

手机图像上传-甚至不调用Java代码

2 个答案: