视频电商网站实战 - 构建视频提交页面:视频封面上传(上)

[上节课](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>