typescript - 使用 angular 7 上传图片到文件夹

我想使用 Angular 7 将图片上传到 assets/ 文件夹，下面是我的尝试：

HTML：

<form [formGroup]="form" (ngSubmit)="postData()" class="intro-form-css">
              <div class="form-row">
                <div class="form-group col-lg-12 col-md-12 col-12">
                    <label class="form-text">Icon</label>
                  <input type="file" class="file" #introIcon id="uploadBtn" (change)="onFileChange($event)" name="browseIcon">
                  <div class="input-group">
                    <span class="input-group-btn">
                      <button class="btn btn-css-browse" type="button" (click)="triggerFile()">Browse</button>
                    </span>
                    <input type="text" class="form-control css-input" disabled placeholder="Upload Icon" #uploadFileName id="uploadFile">
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-lg-12 col-md-12 col-12">
                  <label class="form-text">Title</label>
                  <input type="text" formControlName="introTitle" placeholder="Enter Title" class="form-control border-radius-0" />
                </div>
              </div>

              <div class="form-row">
                  <div class="form-group col-lg-12 col-md-12 col-12">
                    <label class="form-text">Description</label>
                    <textarea rows="5" cols="50" formControlName="introDesc" placeholder="Enter Description" class="form-control border-radius-0 no-resize"></textarea>
                  </div>
                </div>
              <div class="form-row">
                <div class="form-group col-lg-6 col-md-6 col-6">
                  <button type="button" class="btn btn-block custom-css-btn" >Submit</button>
                </div>
                <div class="form-group col-lg-6 col-md-6 col-6">
                  <button type="button" class="btn btn-block custom-css-btn" >Cancel</button>
                </div>
              </div>
            </form>

ts:

      fileName;
      fileType;
      form: FormGroup;

      @ViewChild('introIcon') uploadFileVariable: ElementRef;
      @ViewChild('uploadFileName') uploadFileName: ElementRef;
      ngOnInit() {
          this.form = this.formBuilder.group({
            browseIcon: [''],
            introTitle: '',
            introDecs: ''
          });
        }

        triggerFile(){
          document.getElementById('uploadBtn').click()
        }

        onFileChange(event) {
          if (event.target.files.length > 0) {
            const file = event.target.files[0];
            this.fileName = file.name;
            this.fileType = file.type;
            if(this.fileType == 'image/png' || this.fileType == 'image/jpeg' || this.fileType == 'image/PNG' || this.fileType == 'image/JPEG') {
              let fName = (<HTMLSelectElement>document.getElementById('uploadFile')).value;
              fName = this.fileName;
              this.uploadFileName.nativeElement.value = fName;
              this.form.get('browseIcon').setValue(file);
            } else {
console.log('Error!');
            }
          }
        }

        postData() {
          const formData = new FormData();
          if (this.form.get('browseIcon').value == '' || this.form.get('browseIcon').value == null) {
console.log('Error!');
          } else {
            formData.append('file', this.form.get('browseIcon').value);
            formData.append('introDecs', this.form.get('introDecs').value);
            formData.append('introTitle', this.form.get('introTitle').value);
            console.log('formData:', formData);
          }
        }

我不知道在哪里/该添加什么代码来将图像上传到本地文件夹。此外，我在 formData 中没有收到任何响应。我还想在 web 服务中发送该文件名、标题和描述。

答案＃1

这是不可能的，你无法从前端（Angular、JavaScript 等）上传任何文件。

通过 Javascript，你无法指定用户的桌面位置来下载文件。

在后端（nodeJs、Php、Java 等）创建一个 API，将你的图片 formData 传递给它，并通过 API 将文件保存到所需位置