鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ express接收不了前端傳來(lái)的formdata

express接收不了前端傳來(lái)的formdata

前端代碼

        <li class="block">上傳產(chǎn)品圖片:
          <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">上傳產(chǎn)品詳情圖片:
          <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);
// 通過(guò) filename 屬性定制
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, upload);    // 保存的路徑,備注:需要自己創(chuàng)建
  },
  filename: function (req, file, cb) {
    // 將保存文件名設(shè)置為 字段名 + 時(shí)間戳,比如 logo-1478521468943
    cb(null, file.fieldname + '-' + Date.now()+'.png');
  }
});
// 通過(guò) storage 選項(xiàng)來(lái)對(duì) 上傳行為 進(jìn)行定制化
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:'進(jìn)來(lái)了'});
});

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

前端代碼發(fā)送數(shù)據(jù)的formData.get('file') 換成對(duì)應(yīng)的pro和formData 也不行

后端接收的req.body

{"name":"123","img":{},"menu":"123","list":[{"productDetails":{}}]}
為什么formdata是空的,后端如何處理接收過(guò)來(lái)的formdata?

回答
編輯回答
孤慣

前端傳遞的根本不是一個(gè)formdata,還是一個(gè)json對(duì)象,只不過(guò)是指定了content-type

2017年9月13日 17:31