一：以前寫的老版本的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.jsvue
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 後端代碼和上面同樣