问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
呼啦啦
    39316146207

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

    clipboard.png

    javascriptelement-uivue.js
    阅读 21.9k
    4 个回答
    得票最新
    头像
    lucifer
      5.3k1522

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

      头像
      饿狼逐日
        232

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

        document.querySelector('.class button').click();
        头像
        MrBigShot
          4.8k1688118

          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

          头像
          仓术子
            912
            <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();
}

            补充 vue2
            image.png

            <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.min.js"></script>
</head>
<div id="app">
    <el-upload ref="upload" class="avatar-uploader" action="/file/upload/uploadFile">
        <div class="el-upload__tip" slot="tip"><span @click="btn">上传</span></div>
    </el-upload>
</div>

<body>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            btn: function () {
                console.log("upload");
                console.log(this.$refs['upload'].$children[0]);
                console.log("------------------------------");
                console.log(this.$refs['upload'].$children[0].$refs.input);
            }
        }
    })
</script>

</html>

            补充 vue3
            image.png

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题