Upload

Test

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-upload :class="{upload: true, 'upload-hide': classUploadHide}" action="" :auto-upload="false" list-type="picture-card" :on-change="handleImageChange" :on-remove="handleRemove"
  :file-list="fileList2">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.upload{
  .el-upload-list {
    li {
      transition: none;
    }
  }
}
.upload-hide{
  .el-upload{
    display:none
  }
}

Babel + JSX

var Main = {
    data() {
      return {
      fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
     		dialogImageUrl: '',
        dialogVisible: false,
        fileImageList: [],
      	fileImage: null,
        classUploadHide: true,
      };
    },
    methods: {
       handleImageChange(file) {
				 this.imageUrl = URL.createObjectURL(file.raw)
         this.fileImageList = [file]
         this.fileImage = file.raw
         this.classUploadHide = true
       
    	},
       handleRemove(file, fileList) {
         this.fileImageList= []
      	 this.fileImage=null
          this.classUploadHide = false
      },
       handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')