表单 - 在 Angular 6 中使用 Spring Boot 上传文件或图片

请帮助我或给我建议

---------------#################---------------

如果可能的话，使用 formcontrolName 在表单中上传图片的可能方法是什么，请提供一些建议

------------###########################---------------------

我正在尝试上传一个图片文件以及其他信息，如 firstname、lastname 和 file，这运行得非常完美：

/* File Upload request  to Upload file  */
this.currentFileUpload = this.selectedFiles.item(0);
let formdata: FormData = new FormData();
formdata.append('firstName', "Harkesh");
formdata.append('lastName', "kumar");
formdata.append('file', this.currentFileUpload);

但我的问题是我正在发送包含一些字符串和Object的FORM文件，但FormData不接受Object：

let formdata: FormData = new FormData();
formdata.append('functionId', this.functionId);
formdata.append('processId', this.processId);
formdata.append('file', this.currentFileUpload);
formdata.append('formDetails', userobjArr);

我正在尝试的第二个选项：

let formdata: FormData = new FormData();
formdata.append('file', this.currentFileUpload);

userDetails.name = "";
userobjWrapper["functionId"] = this.functionId;
userobjWrapper["processId"] = this.processId;
userobjWrapper["taskId"] = this.taskId;
userobjWrapper["file"] = this.currentFileUpload;
userobjWrapper["formDetails"] = userobjArr;

userobjArr 是 Object 数组，我用 formDetails 赋值，但它的值变成了 null。

我不确定如何在一次 REST 服务 API 调用中读取图像？对于 REST API，我正在使用 Spring Boot Rest Controller

你能给我提一些想法吗..

答案＃1

试试这个 :)

onBmpFileUploadChange(event) {
    const self = this;
    const target = event.target || event.srcElement;
    const files = target.files;
    let arrPath = files[0].name;
    arrPath = arrPath.split('.');
    if ((arrPath[1] === 'bmp') || (arrPath[1] === 'BMP')) {
      const xhttp = new XMLHttpRequest();
      const formData = new FormData();
      console.log('uploadBitmap');
      formData.append('bitmapFile', files[0]);
      xhttp.onreadystatechange = function () {
        event.target.value = null;
        if (this.readyState === 4) {
          if (this.status === 201) {
            console.log('bmpUploadedSuccessfully');
          } else {
            console.log('bmpUploadFailed')));
          }
        }
      };
      xhttp.open('post', '/formatgraphics', true);
      xhttp.setRequestHeader('Pragma', 'no-cache');
      xhttp.send(formData);
    } else {
      console.log('uploadFailedInvalidFile')));
    }
  }
}