Доступ к данным загрузки файла в функции отправки ngform в угловых 5? - PullRequest
Новая
       59

Доступ к данным загрузки файла в функции отправки ngform в угловых 5?

0 голосов
/ 16 мая 2018

У меня есть ngform с вводом файла вместе с другими полями ввода. В настоящее время я передаю данные компоненту с помощью ngmodel при отправке. Но я не знаю, как выполнить загрузку файла с помощью ngmodel. В бэкэнде я использую Laravel.

В настоящее время я могу получить данные файла в функции компонента handleFileInput . Я хочу передать эти данные вместе с другими полями ввода формы. Как мне этого добиться?

Код шаблона 

<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() {
        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;
            });
    }

1 Ответ

0 голосов
/ 16 мая 2018

То, что вы делаете с обнаружением изменений, верно.

Просто вам нужно будет создать данные формы и отправить эти данные вместе с вашим запросом на публикацию. Вам не нужно устанавливать тип контента на своей угловой стороне, Angular сделает эту работу за вас.

Я предоставляю вам пример моего углового узла, надеюсь, это поможет вам.

В моем примере я использовал multer для хранения файла.

Пример

Угловая составляющая 

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