Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端詳解

更新時間：2022年04月08日 16:18:21 作者：vv-檸檬茶

在做項目的時候遇到一個問題,前端需要上傳表單到后端,表單數(shù)據(jù)包括文本內容和圖片,這篇文章主要給大家介紹了關于Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端的相關資料,需要的朋友可以參考下

在做項目的時候遇到一個問題，前端需要上傳表單到后端，表單數(shù)據(jù)包括文本內容和圖片，后端我用的是Nodejs，效果類似下圖

前端需要向后端傳商品名稱，價格，描述，商品圖片

前端準備，利用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="商品價格">
            <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傳的是對應的后端接口

在上傳圖片前，需要先將圖片轉成base64格式的字符串后再上傳給后端，這里定義了 beforeProductUpload函數(shù)進行轉碼處理

 beforeProductUpload(file){
          var _this = this
        return new Promise(function(resolve, reject) {
          var reader = new FileReader()
         reader.readAsDataURL(file)// 這里是最關鍵的一步，轉換成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) {
        //圖片預覽
        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)// 這里是最關鍵的一步，轉換成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>

定義一個imageurl數(shù)組來接收傳入的圖片base64碼，然后在保存在form對象中傳過去給Node后端保存到數(shù)據(jù)庫中，這里我用的是mongodb數(shù)據(jù)庫，可以看到數(shù)據(jù)已經(jīng)傳到數(shù)據(jù)庫了，imgdata就是存放圖片base64的對象。