[英]Vuejs: Axios post JSON data and Image data
目前,我正在創建一個包含圖像數據和 JSON 數據的表單。 我使用 2 post 方法將圖像數據和 JSON 數據分別發布到我的 nodejs 后端。 是否有任何可能的解決方案使我能夠僅通過使用 axios 和后端使用 nodejs 為圖像和 JSON 數據發布一次。
以下是我的代碼。
前端vue.js
submitAuth() {
console.log(this.promo.bannerImg)
const formData = new FormData()
formData.append('bannerImg', this.promo.bannerImg)
formData.append('inAppImg', this.promo.inAppImg)
formData.append('inAppImg', this.promo)
axios.post(`http://localhost:5000/success`,
this.promo
)
.then(response => {
console.log('Submit Success')
})
.catch(e => {
console.log('Submit Fail')
})
axios.post('http://localhost:5000/uploadImg',
formData
).then(response => {
console.log('Submit Success')
}).catch(e => {
console.log('Submit Fail')
})
},
},
后端node.js
app.post("/success", function (request, response) {
co(function* () {
var promouid = request.body.uid
var filename = __dirname + '/public/promo-json/' + promouid + '.json'
var promotionJSON = JSON.stringify(request.body)
fs.writeFile(filename, promotionJSON, 'utf-8', function (err) {
if (err) throw err;
console.log(request.body);
});
var stream = fs.createReadStream(filename);
var size = fs.statSync(filename).size;
var result = yield client.putStream(
'promojson/' + promouid + '.json', stream, {contentLength: size});
console.log(result);
}).catch(function (err) {
console.log(err);
});
});
app.post("/uploadImg", function (req, res) {
var storage = multer.diskStorage({
destination: 'public/image',
filename: function ( req, file, cb ) {
// set image name
console.log()
cb( null, 'asdasdsad-' + Date.now());
}
});
var upload = multer({
storage: storage,
}).any();
upload(req, res, function(err) {
if (err) {
console.log(err);
return res.end('Error');
} else {
console.log(req.body);
req.files.forEach(function(item) {
console.log(item);
});
res.end('File uploaded');
}
});
});
如果您想使用單個請求上傳所有內容,則最好將FormData用於需要上傳的所有內容。
您可以獲取 JSON 數據,將其序列化為字符串,然后將其與圖像一起添加到 FormData 中。
你的前端vue.js看起來像這樣:
const formData = new FormData();
// Add images to form data
formData.append('bannerImg', this.promo.bannerImg)
formData.append('inAppImg', this.promo.inAppImg)
formData.append('inAppImg', this.promo)
// Add the serialized JSON data to the formData (not
// sure what your JSON object is called)
formData.append('data', JSON.stringify(this.data));
// Submit the form data
axios.post('http://localhost:5000/uploadImg',
formData
).then(response => {
console.log('Submit Success')
}).catch(e => {
console.log('Submit Fail')
});
在后端,您只需反序列化發送到 JSON 對象的 FormData 中的數據字段,然后您就可以使用它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.