angular 5 中的 ngform 提交功能访问文件上传数据？

Question

我有一个带有文件输入和其他输入字段的 ngform。目前我在提交时使用 ngmodel 将数据传递给组件。但是我不知道如何使用 ngmodel.In 我正在使用的后端 Laravel.

执行文件上传

目前我能够在组件函数 handleFileInput 中获取文件数据。我想将这些数据与其他表单输入一起传递 fields.How 我能做到吗？

模板代码

<div class="form-group">
<label for="file">Choose File</label>
<input type="file" id="file" (change)="handleFileInput($event.target.files)">                               
</div>

组件代码

handleFileInput(files: FileList) {
      this.fileToUpload = files.item(0);
    }

onSubmit 方法

onSubmit() {
        this.loading = true;
        this._dataService.create(this.model, company_url).subscribe(data => {
            this.submitted = true;
            this.loading = false;
            this.companyForm.reset();
        },
            error => {
                this.loading = false; console.log(error);
                this.error_message = error;
            });
    }

Answer 1

您在更改检测方面所做的部分是正确的。

只是您必须创建一个表单数据并随您的 post 请求提交该表单数据。您不必在 angular 端设置内容类型，Angular 会为您完成这项工作。

我正在为您提供我的 angular + 节点示例，希望这对您有所帮助。

我在示例中使用了 multer 来存储文件。

示例

Angular分量

// Create Variable for your file and formdata.
selectedFile: File = null;
fd = new FormData();

constructor(private http: HttpClient){}

// Once the file change is detected append your file to your formdata and on submit post the request.
handleFileInput(event) {
      this.selectedFile = <File>event.target.files[0];
      this.fd.append('file', this.selectedFile, this.selectedFile.name);
    }

onSubmit() {
    this.http.post(url, this.fd)
    .subscribe((data)=>{console.log(data);});
}

节点路由文件。

var multer = require("multer");
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './upload')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
})
const upload = multer({
    storage: storage
});
var fs = require('fs');

router.post('/uploadprofile', auth, upload.single('image'), (req, res) => {
   res.send('file uploaded');
});

angular 5 中的 ngform 提交功能访问文件上传数据？

Access file upload data on ngform submit function in angular 5?

file-upload

image-upload

angular

angular5