cssvue.jselement-ui

Upload Single File Using Element UI on VueJS


I have a question about uploading an image on vuejs using elementUI el-upload. I want to hiding the selected box ( + ) after select one image.

enter image description here

I have to follow the instructions step by step on this site https://programmersought.com/article/59531832236/;jsessionid=6B629FE55DAE317A6E98B9049DAAEECC , but unfortunatelly i have not been able to implement it

Could everyone here to help me to solve this problem ?
Thank You


Solution

  • You have to manage it your self to keeping tracking whether you selected something:

    <div id="app">
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      :on-change="toggleUpload" 
      :on-remove="toggleUpload"   
      :class="{ hideUpload: !showUpload }" >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
        </div>
    </el-upload>
    </div>
    

    JS:

    var Main = {
        data() {
          return {
            showUpload: true
          };
        },
        methods: {
          toggleUpload() {
            this.showUpload = !this.showUpload
          },
        }
      }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
    

    CSS

    .hideUpload > div {
      display: none;
    }
    

    Codepen: https://codepen.io/reijnemans/pen/rNxeKeY