[ElemeFE/element]upload 上传组件照片墙

没有一个接口可以隐藏上传组件。比如我想限制上传5张，上传到第五张，上传组件隐藏

这个api before-upload 这个api 返回false 还是会添加图片只是没有上传而已有bug

yanzaocheng

现有的API能够实现你的需求，自己找思路吧

baiyaaaaa

有个api before-upload 这个api 返回false 还是会添加图片只是没有上传而已有bug

yanzaocheng

这个问题可以在uploadsuccess的时候通过修改当前的filesList来解决检测出现大小问题之后将无效的fileList从回调的fileList中移除再将回调的fileList赋值给upload的fileList即可

maxwelltsai1536

请问这个问题解决了吗？ api里没有limit之类的参数，莫非要用 jquery 去隐藏那个加号图标么？

lkiarest

我用的是是手动上传的照片墙组件。

el-upload里面绑定一个占位class：

:class="{hide:hideUpload}"

data里面初始值：

hideUpload: false,

onChange里面（添加文件、上传成功和上传失败时都会被调用的那个）：

this.hideUpload = fileList.length >= this.limitCount;

handleRemove里面（删除文件被调用的那个）：

this.hideUpload = fileList.length >= this.limitCount;

style，把scoped去掉：

<style>
.hide .el-upload--picture-card {
    display: none;
}
</style>

lebuslebos

@lebuslebos style，把scoped去掉 会影响到其他样式的吧

cat-kun

超限了要怎么隐藏上传区域?就那个+号那块

kid1412621

不去掉的话怎么影响element的样式呢...

coder-sango

可以，谢谢了

xuech

可以利用 ref="ID" :on-remove="判定已经上传的图片列表的长度，小于目标数量就显示 + " :on-exceed="超过数量显示就提示，注意是验证 file 的 length" :on-change="如果达到目标数量就隐藏"

onChange 中关键性代码 const d = this.$refs["ID"] d.$children[1].$el.style.display = 'none' onRemove 中关键性代码 const d = this.$refs["ID"] d.$children[1].$el.style.display = ''

thk9

这个功能应该作为组件的基本功能来提供，其他 hack 的方式没有必要

lkiarest

这样写不去掉scoped也可以/deep/.hide .el-upload--picture-card { display: none; }

jiangmintun123

scoped不用去掉，可以写成/deep/

babyfacer0104

用你们的方法还是不行呀？上传的也被隐藏了

yongfeng-peng

用TS实现

<template>
  <div style="height:150px;overflow: hidden">
  <el-upload
      ref="upload"
      :limit="limit"
      :multiple="false"
      action="#"
      :auto-upload="false"
      :file-list="fileList"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-change="handleImageChange"
      :on-remove="handleRemove"
  >
      <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from "vue-property-decorator";

@Component({
  name: "G2PictureUpload",
  components: {
  }
})
export default class extends Vue {
  private dialogImageUrl = "";
  private dialogVisible = false;
  @Prop({default:""})private value!:string;
  @Prop({default:1})private limit:number;

  get fileList(){
    if(this.value === "")return [];
    return [{url:this.value}];
  }

  @Watch("value",{deep:true,immediate:true})
  onValueChange(v:string) {
    const ele = ((this.$refs["upload"] as Vue).$children[1].$el as HTMLElement);
    ele.style.display = v!== ""?"none":"";
  }

  handleImageChange(file,fileList){
    this.value = file.url;
  }
  handleRemove(file, fileList) {
    this.value = "";
  }
  handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
  }
}
</script>

<style scoped>
</style>

ixre

[ElemeFE/element]upload 上传组件 照片墙

回答

[ElemeFE/element]upload 上传组件照片墙