电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

如何在 Vue 表單中處理圖片

瀏覽:7日期:2022-10-08 16:07:22
問題:

我在 Vue 中有一個 form 表單,用于上傳博客帖子,它有標題、正文、描述、片段和圖片等范圍。所有的一切都是必需的。我在 Express 中設置了一個 API 來處理這個問題。我在 Postman 中測試正常,但是我不知道如何通過瀏覽器將文件發送給數據庫。我一直收到 500 錯誤,并且我將數據打印到控制臺,而圖片字段為空,所以我確信這就是問題所在,但我就是搞不清楚怎么辦。

這是我前端頁面的 form 表單:

<template> <div class='container'> <div id='nav'> <adminnav/> </div> <div id='create'> <h1>Create new post</h1> </div> <div id='post'> <body> <form> <label for='title'>Title: </label> <textarea v-model=formdata.title rows='5' cols='60' name='title' placeholder='Enter text'> </textarea> <br/> <label for='body'>Body: </label> <textarea v-model=formdata.body rows='5' cols='60' name='body' placeholder='Enter text'> </textarea> <br/> <label for='description'>Description: </label> <textarea v-model=formdata.description rows='5' cols='60' name='description' placeholder='Enter text'> </textarea> <br/> <label for='snippet'>Snippet: </label> <textarea v-model=formdata.snippet rows='5' cols='60' name='snippet' placeholder='Enter text'> </textarea> <br/> <label for='file'>Upload photo: </label> <input type='file' accept='image/*' v-bind='formdata.photo' /> <br/> <input type='submit' value='submit' @click.prevent='createPost()'/> </form> </body> </div> </div></template><script>import adminnav from ’../components/adminnav.vue’;import PostService from ’../service/PostService’;export default { name: ’createStory’, components: { adminnav, }, data() { return { formdata: { title: ’’, body: ’’, description: ’’, snippet: ’’, photo: null, }, }; }, methods: { createPost() { console.log(this.formdata); /* eslint prefer-destructuring: 0 */ const formdata = this.formdata; PostService.createPost(formdata) .then(() => { console.log(’success’); }); }, },};</script>

這是 POST 請求。

router.post('/add-story', upload.single(’photo’), async(req, res) => { try{ let post = new Post(); post.title = req.body.title; post.description = req.body.description; post.photo = req.file.location; post.body = req.body.body; post.snippet = req.body.snippet; await post.save(); res.json({ status: true, message: 'Successfully saved.' }); } catch(err) { res.status(500).json({ success: false, message: err.message }); }});解決方法

讓我們監視文件 <input> 中的 change 事件。這樣可以確保每次用戶的上傳行為觸發 updatePhoto 方法并把文件數據儲存到 this.photo。

<input type='file' accept='image/*' @change='updatePhoto($event.target.name, $event.target.files)'>

編碼去收集所有的數據并發送請求

// vue組件的其他部分data () { return { title: ’’, body: ’’, description: ’’, snippet: ’’, photo: {} // 儲存文件數據 };},methods: { updatePhoto (files) { if (!files.length) return; // 存儲文件數據 this.photo = { name: files[0].name, data: files[0] }; }, createPost() { let formData = new FormData(); formData.append(’title’, this.title); formData.append(’body’, this.body); formData.append(’description’, this.description); formData.append(’snippet’, this.snippet); formData.append(’photo’, this.photo.data, this.photo.name); PostService.createPost(formdata) .then(() => { console.log(’success’); }); }}// vue組件的其他部分

很明顯,我跳過了很多事情,比如整個 vue 組件結構,我相信它與這個問題無關,還有一些確保在啟動請求之前文件數據可用的檢查等等。這是一個關于如何獲取文件數據的想法,所以希望這個答案能啟發您。

以上就是如何在 Vue 表單中處理圖片的詳細內容,更多關于Vue 表單中處理圖片的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: 上海阳光泵业制造有限公司 -【官方网站】| 压力控制器,差压控制器,温度控制器,防爆压力控制器,防爆温度控制器,防爆差压控制器-常州天利智能控制股份有限公司 | ph计,实验室ph计,台式ph计,实验室酸度计,台式酸度计 | 注塑_注塑加工_注塑模具_塑胶模具_注塑加工厂家_深圳环科 | 电缆接头_防水接头_电缆防水接头_防水电缆接头_上海闵彬 | 北京包装设计_标志设计公司_包装设计公司-北京思逸品牌设计 | 二手Sciex液质联用仪-岛津气质联用仪-二手安捷伦气质联用仪-上海隐智科学仪器有限公司 | 南京兰江泵业有限公司-水解酸化池潜水搅拌机-絮凝反应池搅拌机-好氧区潜水推进器 | 阴离子聚丙烯酰胺价格_PAM_高分子聚丙烯酰胺厂家-河南泰航净水材料有限公司 | 冷库安装厂家_杭州冷库_保鲜库建设-浙江克冷制冷设备有限公司 | 博博会2021_中国博物馆及相关产品与技术博览会【博博会】 | 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 手术室净化厂家-成都做医院净化工程的公司-四川华锐-15年特殊科室建设经验 | 变频器维修公司_plc维修_伺服驱动器维修_工控机维修 - 夫唯科技 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 珠海白蚁防治_珠海灭鼠_珠海杀虫灭鼠_珠海灭蟑螂_珠海酒店消杀_珠海工厂杀虫灭鼠_立净虫控防治服务有限公司 | 搅拌磨|搅拌球磨机|循环磨|循环球磨机-无锡市少宏粉体科技有限公司 | 建筑资质代办-建筑资质转让找上海国信启航 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | KBX-220倾斜开关|KBW-220P/L跑偏开关|拉绳开关|DHJY-I隔爆打滑开关|溜槽堵塞开关|欠速开关|声光报警器-山东卓信有限公司 | 紧急切断阀_气动切断阀_不锈钢阀门_截止阀_球阀_蝶阀_闸阀-上海上兆阀门制造有限公司 | 网架支座@球铰支座@钢结构支座@成品支座厂家@万向滑动支座_桥兴工程橡胶有限公司 | 钢托盘,铁托盘,钢制托盘,镀锌托盘,饲料托盘,钢托盘制造商-南京飞天金属13260753852 | 实木家具_实木家具定制_全屋定制_美式家具_圣蒂斯堡官网 | 首页-瓜尔胶系列-化工单体系列-油田压裂助剂-瓜尔胶厂家-山东广浦生物科技有限公司 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | Q361F全焊接球阀,200X减压稳压阀,ZJHP气动单座调节阀-上海戎钛 | 护腰带生产厂家_磁石_医用_热压护腰_登山护膝_背姿矫正带_保健护具_医疗护具-衡水港盛 | 14米地磅厂家价价格,150吨地磅厂家价格-百科 | 桁架机器人_桁架机械手_上下料机械手_数控车床机械手-苏州清智科技装备制造有限公司 | 横河变送器-横河压力变送器-EJA变送器-EJA压力变送器-「泉蕴仪表」 | NM-02立式吸污机_ZHCS-02软轴刷_二合一吸刷软轴刷-厦门地坤科技有限公司 | 广东成考网-广东成人高考网 | 石膏基自流平砂浆厂家-高强石膏基保温隔声自流平-轻质抹灰石膏粉砂浆批发-永康市汇利建设有限公司 | 北京签证代办_签证办理_商务签证_旅游签证_寰球签证网 | 食安观察网| 断桥铝破碎机_铝合金破碎机_废铁金属破碎机-河南鑫世昌机械制造有限公司 | 精密光学实验平台-红外粉末压片机模具-天津博君 | 自动售货机_无人售货机_专业的自动售货机运营商_免费投放售货机-广州富宏主官网 | 纯化水设备-EDI-制药-实验室-二级反渗透-高纯水|超纯水设备 | 脉冲除尘器,除尘器厂家-淄博机械| 橡胶膜片,夹布膜片,橡胶隔膜密封,泵阀设备密封膜片-衡水汉丰橡塑科技公司网站 |