[上节课](http://blog.csdn.net/github_26672553/article/details/54615267 )
我们已经初步构建了一个『发布视频』的界面，本节课我们来完善
参考Element-UI文档：http://element.eleme.io/#/zh-CN/component/upload 给发布视频组件publish.vue，添加如下模板内容：
<el-form-item label="视频封面" PRop="v_pic"> <el-upload action="//jsonplaceholder.typicode.com/posts/" type="drag" :thumbnail-mode="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :multiple="false" > <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>
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>
