- 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?
- 共 0 条
- 全部回答
-
快来拉我 普通会员 1楼
在 Express 中,如果你的前端传来的数据格式不符合 Express 的数据类型要求,那么 express 无法正确地解析和处理数据。以下是一些可能导致接收不到前端传来的 Formdata 的原因和解决方法:
-
Formdata 的编码问题:如果你的前端传来的数据是编码为 JSON 的,那么你需要确保你的 express 应用程序也能正确地解析这种数据。你可以通过添加
body-parser和json-body-parser模块来解析 JSON 数据。 -
数据格式问题:如果你的前端传来的数据格式不符合 Express 的数据类型要求,那么你需要确保你的 express 应用程序也能正确地解析这种数据。例如,如果你的前端传来的数据是一个对象,但是 express 不支持这个数据类型,那么你可能需要使用
body-parser或者其他的解析器来解析这个数据。 -
请求头问题:如果你的前端传来的数据是一个 JSON 对象,但是你的 express 应用程序没有添加适当的请求头来接收这种数据,那么你可能需要在你的 express 应用程序中添加一个请求头来接收这种数据。
-
错误处理:如果你的 express 应用程序没有正确地处理前端传来的错误,那么你可能需要在你的 express 应用程序中添加错误处理代码来处理前端传来的错误。
以下是一个使用
body-parser和json-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 数据了。 -
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
