带有弹簧启动的角度6中的文件上传或图像上传答案

【问题标题】：File Upload or Image Upload In angular 6 with spring boot带有弹簧启动的角度6中的文件上传或图像上传
【发布时间】：2019-02-03 02:42:18
【问题描述】：

请帮助我或建议我

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

如果可能的话，有什么方法可以使用 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 是我用formDetails 分配的Object 数组，这将获得null 值。

我不确定如何在一次服务 API 调用中读取图像？对于rest API，我使用的是spring boot Rest Controller

你能给我建议吗..

【问题讨论】：

如果您无法回答，请分享或编辑upvote，以便我和您得到答案
你是否在控制台打印 userobjArr 如果它是一个表单对象然后 userobjArr.getRawData()
是的，我可以打印
也许我过于简单化或误解了这个问题，但你能不能只将对象 JSON 编码成字符串，然后 JSON 解码另一端？
我不是你说的那样

标签： angular forms typescript file-upload multipartform-data

【解决方案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')));
    }
  }
}

【讨论】：