如何用elementui去實現圖片上傳和表單提交，用axios的post方法

一：之前寫的老版本的elementui的版本是2.1.0，vue的版本是2.5.2

1.1下面是在vue搭建的腳手架項目中的組件component文件夾下面的upload.vue文件中的內容

<!--這個組件主要用來研究upload這個elementui的上傳插件組件-->

<template>
    <el-row>
        <el-col :span="8" :offset="8">
            <div id="upload">
                <label class="el-form-item__label" style="width: 80px;">上傳圖片</label>
                <!--elementui的上傳圖片的upload組件-->
                <el-upload
                  class="upload-demo"
                  :before-upload="beforeupload"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  style="margin-left:80px;">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
                  <!--<div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過500kb</div>-->
                </el-upload>
                
                <!--elementui的form組件-->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活動名稱">
                        <el-input v-model="form.name" name="names" style="width:360px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即創建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
        
        <!--展示選中圖片的區域-->
        <el-col :span="4" >
            <div style="width:100%;overflow: hidden;margin-left:150px;">
                <img :src="src" alt="" style="width:100%;"/>
            </div>
        </el-col>
    </el-row>
    
</template>

<script>
    export default {
        data() {
            return {
                form: {//form里面的參數
                  name: ''
               },
               param:"",//表單要提交的參數
               src:"https://afp.alicdn.com/afp-creative/creative/u124884735/14945f2171400c10764ab8f3468470e4.jpg" //展示圖片的地址
            };
        },
        methods: {
            beforeRemove(file, fileList) {
                //return this.$confirm(`確定移除 ${ file.name }？`);
            },
            //阻止upload的自己上傳，進行再操作
            beforeupload(file) {
                console.log(file);
                //創建臨時的路徑來展示圖片
                var windowURL = window.URL || window.webkitURL;
                
                this.src=windowURL.createObjectURL(file);
                //重新寫一個表單上傳的方法
                this.param = new FormData();
                this.param.append('file', file, file.name);
                return false;
            },
            //覆蓋默認的上傳行為
            httprequest() {

            },
            onSubmit(){//表單提交的事件
                var names = this.form.name;
                //下面append的東西就會到form表單數據的fields中；
                this.param.append('message', names);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                //然后通過下面的方式把內容通過axios來傳到后台
                //下面的this.$reqs 是在主js中通過Vue.prototype.$reqs = axios 來把axios賦給它;
                this.$reqs.post("/upload", this.param, config).then(function(result) {
                                console.log(result);
                })
            }
        }
    }
</script>

 1.2通過上面的組件，在post中傳輸后，后台接受通過fomidable插件來處，這里用的是node，把圖片和表單的數據保到數據庫和本地的靜態資源文件夾里面，如下面：

//這個是后台的routers文件夾下面的upload.js文件

var express = require('express');
var router = express.Router();
var handler = require('./dbhandler.js'); //封裝的mongodb的增刪改查和分頁基本操作的文件；
var ObjectId = require('mongodb').ObjectId; //對mongo的_id處理的插件；
var formidable = require('formidable');
var fs = require("fs");


router.post("/",function(req,res,next){
    var form = new formidable.IncomingForm();
    //設置文件上傳存放地址
    //form.uploadDir = "./public/images";
    //執行里面的回調函數的時候，表單已經全部接收完畢了。
    form.parse(req, function(err, fields, files) {
        console.log("files:",files)  //這里能獲取到圖片的信息
        console.log("fields:",fields) //這里能獲取到傳的參數的信息，如上面的message參數，可以通過fields。message來得到
        
    })
})


module.exports = router;

 二：現在加一個新版本的，帶刪除功能的，elementui的版本2.5.4，這個版本需要vue的版本最低是2.5.16

* 實現的思路前端方面主要是利用elementui的這個upload插件的 auto-upload=false  來阻止自動上傳，然后利用onchange屬性的回調函數的文件來獲取圖片上傳給后台；

前端源碼地址：https://github.com/13476075014/node-vue/blob/master/mynodeproject/01.classweb/vueclient/src/components/upload.vue

后端源碼地址：https://github.com/13476075014/node-vue/blob/master/mynodeproject/01.classweb/server/routes/upload.js

 

2.1 基礎的拖動效果的，樣式如下圖：

 

2.1.1 選中圖片的效果

 

 

 

 

 2.1.2 前端代碼

// upload.vue
<el-row>
    <h2 class="text-left">第一種樣式上傳方法：</h2>
        <el-col :span="8" :offset="8">
            <div id="upload">
        <!--elementui的form組件-->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活動名稱">
                    <el-input v-model="form.name" name="names" style="width:360px;"></el-input>
                </el-form-item>

          <label class="el-form-item__label" style="width: 80px;">上傳圖片</label>
          <!--elementui的上傳圖片的upload組件-->
          <!--
            :auto-upload=false  // 取消自動上傳
            :on-remove="handleRemove" // 處理刪除圖片的操作
            :on-change="onchange" // 通過onchange這個屬性來獲取現在的圖片和所有准備上傳的圖片
            :limit=1 // 限制只能上傳一張，這里暫時只考慮一張圖片的情況
            drag // 設置這個讓可以把圖片拖進來上傳
            action="" // 這里暫時不設置上傳地址，因為我們是要攔截在form中上傳
            -->

          <el-upload
            class="upload-demo"
            :auto-upload=false
            :on-change="onchange"
            :on-remove="handleRemove"
            :limit=1
            drag
            action=""
            style="margin-left:80px;">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
            <div class="el-upload__tip" slot="tip">這里只能上傳一張,如需更換請先手動刪除列表中的！</div>
          </el-upload>
          <el-form-item style="padding-top:20px;">
            <el-button type="primary" @click="onSubmit">立即創建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
                </el-form>
            </div>
        </el-col>

        <!--展示選中圖片的區域-->
        <el-col :span="4" >
            <div style="width:100%;overflow: hidden;margin-left:150px;">
                <img :src="src" alt="" style="width:100%;"/>
            </div>
        </el-col>
    </el-row>

2.1.3 js部分的代碼：

<script>
    export default {
      data() {
            return {
        　　　　form2: {
          　　　　　name: ''
        　　　　　},
        　　　　param:"",//表單要提交的參數
        　　　　src:"https://afp.alicdn.com/afp-creative/creative/u124884735/14945f2171400c10764ab8f3468470e4.jpg" //展示圖片的地址
            };
        },
      methods: {//阻止upload的自己上傳，進行再操作
            onchange(file,filesList) {
                console.log(file);
                //創建臨時的路徑來展示圖片
                var windowURL = window.URL || window.webkitURL;
                this.src=windowURL.createObjectURL(file.raw);
                //重新寫一個表單上傳的方法
                this.param = new FormData();
                this.param.append('file', file.raw, file.name);
      },
      handleRemove(file,filesList){
        this.param.delete('file')
      },
      onSubmit(){//表單提交的事件
         var names = this.form.name;
         //下面append的東西就會到form表單數據的fields中；
         this.param.append('message', names);
         let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };
         //然后通過下面的方式把內容通過axios來傳到后台
         //下面的this.$reqs 是在主js中通過Vue.prototype.$reqs = axios 來把axios賦給它;
         this.$reqs.post("/upload", this.param, config).then(function(result) {
                  console.log(result);
          })
      }
    }
</script>

2.1.4 后台代碼和最開始寫的老板的一樣

2.1.5 后台獲取數據展示：

 

2.2圖片列表樣式效果，如下圖

 

 2.2.1 選中圖片的效果

2.2.2 前端代碼

<el-row>
    <h2 class="text-left">第二種樣式上傳方法：</h2>
        <el-col :span="8" :offset="8">
            <div id="upload2">
        　　<!--elementui的form組件-->
            <el-form ref="form2" :model="form2" label-width="80px">
                <el-form-item label="活動名稱">
                　　<el-input v-model="form2.name" name="names" style="width:360px;"></el-input>
            　　</el-form-item>

          　　　<el-form-item label-width="80px" label="上傳圖片">
            　　<!--elementui的上傳圖片的upload組件-->
            　　<el-upload
             　　 class="upload-demo"
              　　action=""
              　　:limit=1
              　　:auto-upload=false
              　　:on-change="onchange2"
              　　:on-remove="handleRemove2"
              　　:file-list="fileList2"
              　　list-type="picture">
              　　<el-button size="small" type="primary">點擊上傳</el-button>
              　　<!-- <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> -->
            　</el-upload>
          　　</el-form-item>
          　　<el-form-item style="padding-top:20px;" >
               <el-button type="primary" @click="onSubmit2">立即創建</el-button>
               <el-button>取消</el-button>
          　 </el-form-item>
        　 </el-form>
         </div>
        </el-col>
    </el-row>

 

2.2.3 js代碼

<script>
    export default {
        data() {
            return {
        　　　　fileList2:[],
        　　　　form2: {
          　　　　name: ''
        　　　　},
        　　　　params2:{}
        },
        methods: {
      　　onchange2(file,filesList){
        　　this.param2 = new FormData();
           this.param2.append('file', file.raw, file.name);
      　　},
      　　handleRemove2(file,filesList){
        　　this.param2.delete('file')
      　　},
      　　onSubmit2(){//表單提交的事件
                var names = this.form2.name;
                //下面append的東西就會到form表單數據的fields中；
                this.param2.append('message', names);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                //然后通過下面的方式把內容通過axios來傳到后台
                //下面的this.$reqs 是在主js中通過Vue.prototype.$reqs = axios 來把axios賦給它;
                this.$reqs.post("/upload", this.param2, config).then(function(result) {
                                console.log(result);
                })
          }
        }
    }
</script>

2.2.4  后端代碼和上面一樣