Question

我想用 axios 发送一个文件，从我的 Vue.js 到我的 Node.js，但是 req.file 参数永远不会被填充，它是未定义的这是我的 vue 中的简化代码：

Inscription.vue :

<template>
  <div class="main_content">
  <h1>Inscription</h1>
  <div><input type='file' @change='openFile'></div>
  <button type='button' v-on:click="inscription" class="inscription">Inscription</button>
  </div>
</template>

<script>
import Axios from 'axios';
export default {
data () {
     return { selectedFile: null}
},
methods:{
    openFile (event) {
        this.selectedFile = event.target.files[0];
    },
    inscription () {
      let fd = new FormData();
      fd.append('avatarBase64', this.selectedFile);
      Axios.create({baseURL: 'http://localhost:4444'}).post('/api/testUploadImage', {avatarBase64: fd});
    }
}

我的简化 node.js 应用程序：

main.ts

import express from "express";
var cors = require('cors');
var bodyParser = require('body-parser')
const multer = require('multer')
const http = require('http');

const server = express();
server.use(cors({origin: true}))
server.use(bodyParser.json({limit: '50mb', extended: true}));
server.use(
    bodyParser.urlencoded({
      extended: true
    })
  )

server.post("/api/testUploadImage", upload.single('avatarBase64'), async (req: any, res: any) => {
    // req.file is undefined PROBLEM THERE
});

const httpServer = http.createServer(server);
httpServer.listen(port);

Answer 1

尝试使用

更改 axios 的标题

'content-type': 'multipart/form-data'

Answer 2

我发现：我正在发送这个

Axios.create({baseURL: 'http://localhost:4444'}).post('/api/testUploadImage', {avatarBase64: fd});

而不是这个：

Axios.create({baseURL: 'http://localhost:4444'}).post('/api/testUploadImage', fd);

Answer 3

更改您的 multer 版本并再次尝试

npm 我multer@2.0.0-rc.2

并编辑：

    Axios.create({baseURL: 'http://localhost:4444'}).post('/api/testUploadImage', fd);

multer : req.file 未定义

3 个答案: