element-ui点击按钮怎么触发上传?

呼啦啦
  • 393

如果官方默认的上传组件下面加了几个字,怎么点击字的时候也能实现上传功能?

clipboard.png

回复
阅读 11.1k
4 个回答

通过css实现不就挺好?将element上传组件的可点击区域覆盖到点击上传。 使得点击 ”点击上传“ 就是点击了上传组件

提供一个小思路,el-upload加个class,通过手动触发click事件。

document.querySelector('.class button').click();

element 里面有一个手动上传

<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

api

仓术子
  • 5
新手上路,请多包涵
<el-upload
    ref="upload"
    class="avatar-uploader"
    action="/file/upload/uploadFile"
    :show-file-list="false"
    :data="fileData"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">

    <div class="el-upload__tip" slot="tip"><span @click="click">上传</span></div>
    
</el-upload>

click() {
this.$refs['upload'].$children[0].$refs.input.click(); 
 }

handleAvatarSuccess() {
    this.$refs.upload.clearFiles();
}
你知道吗?

宣传栏