express接收不了前端传来的formdata

Question

前端代码

        <li class="block">上传产品图片：
          <img :src="productImg" alt="real-photo" v-if="productImg">
          <input type="file" ref="proupload" name="file" class="detailsImg" id="profile" accept="image/*" >
        </li>

        <li class="block">上传产品详情图片：
          <img :src="preview" alt="real-photo" v-if="preview">
          <input type="file" ref="detailsupload" name="file" class="detailsImg" id="file" accept="image/*" >
        </li>

getImg(){

        var that = this
        var proFile = this.$refs.proupload
        var detailFile = this.$refs.detailsupload

        let pro = new FormData(proFile)
        let formData = new FormData(detailFile);

        pro.append('file',this.$refs.proupload.files[0]);
        formData.append('file',this.$refs.detailsupload.files[0]);

        console.log(pro.get('file'));
        console.log(formData.get('file'));

        var config = {
          name:that.productVal,
          img:pro.get('file'),
          menu: that.menuSele,
          list:[
            {
              productDetails:formData.get('file'),
            }
          ]
        }
        axios({
          method:'post',
          url:'/proDetails',
          data:config,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          }
        })
          .then(function(res){
            console.log(res)
          })
      }
    }

后端代码

function(folder){
  try{
    fs.accessSync(folder);
  }catch(e){
    fs.mkdirSync(folder);
  }
};
var upload = './public/images'
createFolder(upload);
// 通过 filename 属性定制
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, upload);    // 保存的路径，备注：需要自己创建
  },
  filename: function (req, file, cb) {
    // 将保存文件名设置为 字段名 + 时间戳，比如 logo-1478521468943
    cb(null, file.fieldname + '-' + Date.now()+'.png');
  }
});
// 通过 storage 选项来对 上传行为 进行定制化
var uploads = multer({ storage: storage }).any()

var proDetilasSchema = new mongoose.Schema({
  name : String,
  img : String,
  list : [Schema.Types.Mixed]
});

var MyModel = mongoose.model('productDetails', proDetilasSchema);

router.get('/', function(req, res, next) {
  return res.status(200).json({msg:'进来了'});
});

router.post('/',uploads, function(req, res, next) {
  return res.status(200).json({msg:'1'});
});
module.exports = router;

前端代码发送数据的formData.get('file') 换成对应的pro和formData 也不行

后端接收的req.body

{"name":"123","img":{},"menu":"123","list":[{"productDetails":{}}]}
为什么formdata是空的,后端如何处理接收过来的formdata?

Answer 1

前端传递的根本不是一个formdata，还是一个json对象，只不过是指定了content-type