时间戳

首页 > 解决方案 > 带有弹簧启动的角度6中的文件上传或图像上传

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

问题描述

请帮助我或建议我

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

如果可能的话，有什么方法可以使用 formcontrolName 上传表单中的图像，请给出一些建议

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

我正在尝试上传带有其他信息的图像文件，例如，firstname这是完美的：lastnamefile

/* 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);

但我的问题是我正在发送FORM带有一些字符串的文件Object，但 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价值。

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

你能建议我任何想法吗..

标签： angularformstypescriptfile-uploadmultipartform-data

解决方案

试试这个:)

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')));
    }
  }
}

推荐阅读