Доступ к данным, отправленным как FormData, используя Axios - PullRequest
Новая
       26

Доступ к данным, отправленным как FormData, используя Axios

0 голосов
/ 02 ноября 2018

У меня есть приложение, написанное на VueJS, в которое я отправляю файл, загруженный пользователем, в серверную часть. Для этого я использую Axios и отправляю файл как FormData. Проблема в том, что я не знаю, как получить доступ к полям в FormData, когда я нахожусь в бэкэнде.

Я отправил файл, используя axios, как это: 

onUpload(): void {
    if(this.fileChosen){
      const fd = new FormData();
      fd.append('file', this.selectedFile, this.selectedFile.name);
      axios.post('http://localhost:8080/routes', fd, {
        onUploadProgress: uploadEvent => {
          console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
        }
      })
      .then(
        res => {
          console.log(res);
        });
    } else {
      this.fileMsg = "You haven't chosen a file";
    }
  }
}

Затем в своем бэкэнде я хочу получить доступ к отправленному мной файлу: 

app.post('/routes', function(req, res){
    res.set("Access-Control-Allow-Origin", "*");
    // Here I want to access my file! But how?
});

1 Ответ

0 голосов
/ 02 ноября 2018

У меня были проблемы с использованием axios для загрузки файлов, поэтому вы можете использовать модуль superagent (https://github.com/visionmedia/superagent), который поддерживает загрузку файлов с помощью formData. Затем в бэкэнде , вам нужно использовать multer (https://github.com/expressjs/multer),, чтобы получить файл.

В файле внешнего интерфейса 

//Method to do the request
superagent
.post(/register")
.attach("avatar", uploadedImage)

uploadedImage содержит изображение, которое вы получаете в компоненте VueJS

В бэкэнд-файле 

var multer = require('multer')
var upload = multer({ dest: 'uploads/' })
import fs from 'fs-extra'

router.post('/register', upload.single('avatar'), (req, res, next) => {
    return fs.readFile(req.file.path)
            .then(content => {
                // The content of the file
            })
}

С этим кодом каждый раз, когда вы загружаете файл / регистрируетесь с содержимым файла в данных формы, ваше изображение будет храниться в папке / uploads на вашем бэкэнде. Обратите внимание, что ключ изображения должен быть одинаковым во внешнем и внутреннем интерфейсах, в данном случае, в аватаре.

...