账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    express接收不了前端传来的formdata
    • 2018-04-05 00:00
    • 11
    44
    0

    前端代码

            <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?

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 快来拉我 普通会员 1楼

      在 Express 中,如果你的前端传来的数据格式不符合 Express 的数据类型要求,那么 express 无法正确地解析和处理数据。以下是一些可能导致接收不到前端传来的 Formdata 的原因和解决方法:

      1. Formdata 的编码问题:如果你的前端传来的数据是编码为 JSON 的,那么你需要确保你的 express 应用程序也能正确地解析这种数据。你可以通过添加 body-parserjson-body-parser 模块来解析 JSON 数据。

      2. 数据格式问题:如果你的前端传来的数据格式不符合 Express 的数据类型要求,那么你需要确保你的 express 应用程序也能正确地解析这种数据。例如,如果你的前端传来的数据是一个对象,但是 express 不支持这个数据类型,那么你可能需要使用 body-parser 或者其他的解析器来解析这个数据。

      3. 请求头问题:如果你的前端传来的数据是一个 JSON 对象,但是你的 express 应用程序没有添加适当的请求头来接收这种数据,那么你可能需要在你的 express 应用程序中添加一个请求头来接收这种数据。

      4. 错误处理:如果你的 express 应用程序没有正确地处理前端传来的错误,那么你可能需要在你的 express 应用程序中添加错误处理代码来处理前端传来的错误。

      以下是一个使用 body-parserjson-body-parser 解析 JSON 数据的例子:

      ```javascript const bodyParser = require('body-parser'); const jsonBodyParser = require('json-body-parser');

      app.use(bodyParser.json());

      app.post('/api/data', jsonBodyParser);

      app.listen(3000, () => { console.log('App listening on port 3000'); }); ```

      在这个例子中,我们使用 body-parser 模块来解析 JSON 数据,然后在 /api/data 路径上使用 json-body-parser 模块来解析 JSON 数据。这样,我们就可以正确地处理前端传来的 JSON 数据了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部