Front end code

        <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)
          })
      }
    }

backend code

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;

the formData.get ("file") of the data sent by the front-end code cannot be replaced with the corresponding pro and formData

req.body received by backend

{"name": "123"," img ": {}," menu ":" 123", "list": [{"productDetails": {}}]}
Why the formdata is empty, and how does the backend handle the received formdata?