在 VueJS 上使用元素 UI 上传单个文件

Question

我有一个关于使用 elementUI 在 vuejs 上上传图片的问题 el-upload。我想在 select 一张图片后隐藏 selected 框 ( + )。

我必须按照本网站上的说明一步步进行 https://programmersought.com/article/59531832236/;jsessionid=6B629FE55DAE317A6E98B9049DAAEECC ，但不幸的是我无法实施它

大家可以帮我解决这个问题吗？
谢谢

Answer 1

您必须自己管理它以跟踪您是否选择了某些内容：

<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;
}

代码笔：https://codepen.io/reijnemans/pen/rNxeKeY

在 VueJS 上使用元素 UI 上传单个文件

Upload Single File Using Element UI on VueJS

css

vue.js

element-ui