角度上传图片到服务器答案

【问题标题】：Angular Upload image to server角度上传图片到服务器
【发布时间】：2020-12-01 16:11:31
【问题描述】：

我是新来的。实际上，我需要知道如何将图像上传到服务器。因为当我尝试上传时出现此错误。

这是我的代码

HTML

<input type="file" name="files" (change)="fileUpload($event)" accept='image/gif' />

组件

fileUpload(event:any){
  this.image = event.target.files[0].name;
    let itemCode = this.activatedRoute.snapshot.paramMap.get('id');
   
    return this.http.post(environment.apiBaseUrl + environment.path + '/data/uploadgif',  {file: this.image, menuCode: itemCode})
    .subscribe((data) => {
      if(data['status']['code'] === 0) {
        document.location.href = environment.url;
      } else {

      }
    });
}

希望大家能帮帮我提前致谢

【问题讨论】：

你在后台用什么？
我用java做后端
您的跨域资源共享 (CORS) 未启用。我不知道如何在 java 中启用它，尽管 link 这可能会有所帮助。

标签： angular typescript file-upload

【解决方案1】：

这是上传图片的简单方法。

function handleInputChange(e) {
    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
}

function _handleReaderLoaded(e) {
    let reader = e.target;

    const result = reader.result;
    // this.openSnackBar(result.length,"OK")
    if (!result) {
      this.openSnackBar("Cannot read", "OK")
      this.imageSrc = '';
    }
    if (result.length > 400000) {
      this.openSnackBar("File size should be less than 300KB", "OK")
      this.imageSrc = '';
    }
    else {
      this.imageSrc = reader.result;
    }
  }

<input type="file" id="fileupload" (change)="handleInputChange($event)">
  <label for="fileupload" class="custom-file-upload">
    <mat-icon style="font-size: large; vertical-align: middle;">attach_file</mat-icon>
  Select</label>

所以你必须基本上将图像转换为base64，然后上传到服务器。如果您使用nodejs 作为服务器，则可以使用multer。

【讨论】：

【解决方案2】：

我遇到了同样的问题。问题不在于图像请求，而在于请求本身。您需要在服务器端启用对所有请求启用的 CrossOrigin。从这里拍摄：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

跨域资源共享标准通过添加新的 HTTP 标头来工作，让服务器描述允许哪些来源从 Web 浏览器读取该信息。此外，对于可能对服务器数据造成副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 方法或具有某些 MIME 类型的 POST），规范要求浏览器“预检”请求，从服务器请求支持的方法使用 HTTP OPTIONS 请求方法，然后在服务器“批准”后发送实际请求。服务器还可以通知客户端是否应随请求发送“凭据”（例如 Cookie 和 HTTP 身份验证）。

【讨论】：