Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端詳解
在做項(xiàng)目的時(shí)候遇到一個(gè)問題,前端需要上傳表單到后端,表單數(shù)據(jù)包括文本內(nèi)容和圖片,后端我用的是Nodejs,效果類似下圖
前端需要向后端傳商品名稱,價(jià)格,描述,商品圖片
前端準(zhǔn)備,利用Element-ui中的表單功能和上傳功能,將upload代碼嵌套在表單中,代碼如下
<template> <div class="content"> <div class="form"> <el-form ref="form" :model="Form" label-width="80px"> <el-form-item label="商品名稱"> <el-input v-model="Form.name"></el-input> </el-form-item> <el-form-item label="商品價(jià)格"> <el-input v-model="Form.price"></el-input> </el-form-item> <el-form-item label="商品描述"> <el-input v-model="Form.description"></el-input> </el-form-item> <el-form-item> <el-upload action="/api/users/addProduct" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeProductUpload"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> <el-form-item> <el-button type="primary" @click="submit">立即創(chuàng)建</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </div> </div> </template>
需要注意的是,upload中的action傳的是對(duì)應(yīng)的后端接口
在上傳圖片前,需要先將圖片轉(zhuǎn)成base64格式的字符串后再上傳給后端,這里定義了 beforeProductUpload函數(shù)進(jìn)行轉(zhuǎn)碼處理
beforeProductUpload(file){ var _this = this return new Promise(function(resolve, reject) { var reader = new FileReader() reader.readAsDataURL(file)// 這里是最關(guān)鍵的一步,轉(zhuǎn)換成base64 reader.onload = function(event) { _this.Form.imageurl.push(event.target.result) //定義參數(shù)獲取圖片路徑 } })
script部分的代碼
<script> export default { data() { return { Form: { name:'', imageurl:[], price:'', description:'' }, dialogImageUrl: '', dialogVisible: false }; }, methods: { handleRemove(file, fileList) { //移除圖片 console.log(file, fileList); }, handlePictureCardPreview(file) { //圖片預(yù)覽 this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeProductUpload(file){ var _this = this return new Promise(function(resolve, reject) { var reader = new FileReader() reader.readAsDataURL(file)// 這里是最關(guān)鍵的一步,轉(zhuǎn)換成base64 reader.onload = function(event) { _this.Form.imageurl.push(event.target.result) //定義參數(shù)獲取圖片路徑 } }) }, submit(){ var form = { name:this.Form.name, imgdata: this.Form.imageurl, price:this.Form.price, description:this.Form.description } this.$axios.post('/api/users/addProduct',form).then(res=>{ console.log(res.data) this.$message('發(fā)布成功') this.Form = '' console.log('上傳成功') }) } } } </script>
定義一個(gè)imageurl數(shù)組來接收傳入的圖片base64碼,然后在保存在form對(duì)象中傳過去給Node后端保存到數(shù)據(jù)庫中,這里我用的是mongodb數(shù)據(jù)庫,可以看到數(shù)據(jù)已經(jīng)傳到數(shù)據(jù)庫了,imgdata就是存放圖片base64的對(duì)象。
自此已成功完成該問題
總結(jié)
到此這篇關(guān)于Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端的文章就介紹到這了,更多相關(guān)Vue用Element-ui發(fā)送數(shù)據(jù)到后端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue使用el-table實(shí)現(xiàn)表格跨頁多選
在我們?nèi)粘m?xiàng)目開發(fā)中,經(jīng)常會(huì)有表格跨頁多選的需求,接下來讓我們用?el-table示例一步步來實(shí)現(xiàn)這個(gè)需求,文中有詳細(xì)的代碼講解,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08使用vue3搭建后臺(tái)系統(tǒng)的詳細(xì)步驟
這篇文章主要介紹了使用vue3搭建后臺(tái)系統(tǒng)的過程記錄,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08vue-element-admin登錄攔截設(shè)置白名單方式
這篇文章主要介紹了vue-element-admin登錄攔截設(shè)置白名單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能
這篇文章主要介紹了Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04element-ui中dialog彈窗關(guān)閉按鈕失效的解決
這篇文章主要介紹了element-ui中dialog彈窗關(guān)閉按鈕失效的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue項(xiàng)目常用組件和框架結(jié)構(gòu)介紹
這篇文章通過圖文形式給大家介紹了vue項(xiàng)目的骨架及常用組件的相關(guān)知識(shí),對(duì)此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。2017-12-12在Vue開發(fā)過程中解決和預(yù)防內(nèi)存泄漏問題的方法詳解
Vue作為一款流行的前端框架,已經(jīng)在許多項(xiàng)目中得到廣泛應(yīng)用,然而,隨著我們?cè)赩ue中構(gòu)建更大規(guī)模的應(yīng)用程序,我們可能會(huì)遇到一個(gè)嚴(yán)重的問題,那就是內(nèi)存泄漏,因此,我們需要認(rèn)識(shí)到在Vue開發(fā)過程中,內(nèi)存泄漏問題的重要性,本文將給大家介紹如何解決和預(yù)防內(nèi)存泄漏問題2023-10-10詳解Vue demo實(shí)現(xiàn)商品列表的展示
這篇文章主要介紹了Vue demo實(shí)現(xiàn)商品列表的展示,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04