JS部分：methods: { handleRemove(file, fileList) { //移除圖片 console.log(file, fileList); }, handlePreview(file) { //預覽圖片 console.log(file); }, handleSuccess(file){ //響應成功 }}
此時上傳圖片，可以預覽。通過觀察我們發現控制臺請求了http://jsonplaceholder.typicode.com/posts/ 路徑，這就是上傳圖片的服務端地址，我們需要換成我們的后臺的路徑即可。
來到后端程序，處理圖片上傳
因為我們課程著重與Vue.js，后端使用的php框架(Yii2)，我們就不做過多介紹。 Yii2文件上傳參考文檔：http://www.yiichina.com/doc/guide/2.0/input-file-upload
比如我們后端上傳圖片的地址是：http://localhost/yiiserver/web/index.php/video/upload 那么，在publish.vue組件模板上需要修改el-upload元素的action屬性，具體代碼：
<el-upload action="http://localhost/yiiserver/web/index.php/video/upload" type="drag" :thumbnail-mode="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :multiple="false" name="Uploader[file]" > </el-upload>除了修改action，還需要注意name，因為我們使用的Yii2框架，UploadedFile[xxx]是框架的規定。框架后端通過xxx來接收文件。
另外http://localhost/yiiserver/web/index.php/video/upload 需要訪問一個json對象：
{"name":"","status":0,"url":""}表示圖片在后端上傳成功，返回的json用于前端判斷。
我們在data中定義個pic對象，用來接受后端返回的數據：
data(){ return { video:{ v_title:'', v_class:2, v_pic:{name:'',url:''}, }, }},handleSuccess方法就是用來處理后端響應的
handleSuccess(file){ //響應成功 console.log(file); if(file.status ==1){ //保存后端返回來的數據 this.video.v_pic.url = file.url; this.video.v_pic.name = file.name; }else{ alert('上傳失敗,,請稍后再試'); }}
有一個查看圖片的功能，我們可以來做一下。 在模板上加入下面內容：
<el-dialog title="圖片預覽" v-model="isShowPic" size="small"> <span> <img :src="video.v_pic.url"> </span> <span slot="footer" class="dialog-footer"> </span> </el-dialog>從v-model可以看出，我們是通過isShowPic這個data屬性來控制對話框是否彈出。 所在在data()里需要定義isShowPic:false,默認對話框是關閉的。 當用戶點擊『查看圖片』就是調用handlePreview方法：
handlePreview(file) { //預覽圖片 console.log(file); this.isShowPic = true;},自此完整的publish.vue代碼如下
<template> <div> <el-dialog title="圖片預覽" v-model="isShowPic" size="small"> <span> <img :src="video.v_pic.url"> </span> <span slot="footer" class="dialog-footer"> </span> </el-dialog> <el-form :model="video" label-width="100px" class="demo-ruleForm"> <el-col :span="12"> <el-form-item label="視頻標題" prop="v_title"> <el-input v-model="video.v_title" placeholder="請輸入視頻標題"></el-input> </el-form-item> <el-form-item label="視頻分類" prop="v_class"> <el-select v-model="video.v_class" placeholder="請選擇"> <el-option v-for="item in this.$store.getters.navForVideoClass" :label="item.nav_text" :value="item.nav_id" > {{item.nav_text}} </el-option> </el-select> </el-form-item> <el-form-item label="視頻封面" prop="v_pic"> <el-upload action="http://localhost/yiiserver/web/index.php/video/upload" type="drag" :thumbnail-mode="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :multiple="false" name="Uploader[file]" > <i class="el-icon-upload"></i> <div class="el-dragger__text">將文件拖到此處，或<em>點擊上傳</em></div> <div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過500kb</div> </el-upload> </el-form-item> </el-col> <el-col :span="12"></el-col> </el-form> </div></template><script> export default{ data(){ return { video:{ v_title:'', v_class:2, v_pic:{name:'',url:''}, }, isShowPic:false, } }, methods: { handleRemove(file, fileList) { //移除圖片 console.log(file, fileList); this.video.v_pic.url = ''; this.video.v_pic.name = ''; }, handlePreview(file) { //預覽圖片 console.log(file); this.isShowPic = true; }, handleSuccess(file){ //響應成功 console.log(file); if(file.status ==1){ //保存后端返回來的數據 this.video.v_pic.url = file.url; this.video.v_pic.name = file.name; }else{ alert('上傳失敗,,請稍后再試'); } } } }</script>
