<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <span slot="default" >上传文件</span>
    <div slot="file" slot-scope="{file}">
      <span
        class="el-upload-list__item-thumbnail"
        
      >
         <i  class="el-icon-document"></i>
        {{file.name}}
       <span>
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>

//css
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

.el-upload-list--picture-card .el-upload-list__item{
  height:30px;
}
.el-upload--picture-card{
  height:40px;
  line-height:40px;
  background-color:#209f84;
  color:#FFFFFF;
  border:0px;
}
.el-upload--picture-card:hover{
  color:#00ff00
}

var Main = {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      };
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')