Question

我有一个用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?
});

Answer 1

我在使用 axios 进行文件上传时遇到了问题，因此您可以使用支持使用formData上传文件的模块 superagent （https://github.com/visionmedia/superagent）。然后，在后端，您需要使用 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
            })
}

使用此代码，每次将文件内容上载到formdata中的文件/ register时，图像将存储在后端的/ uploads文件夹中。请注意，图像密钥的前端和后端必须相同，在这种情况下为头像。

使用Axios访问作为FormData发送的数据

1 个答案: