el-upload 模拟点击

最新推荐文章于 2024-06-11 16:11:19 发布

公孙元二

最新推荐文章于 2024-06-11 16:11:19 发布

阅读量2.2k

点赞数 3

分类专栏： Css/Canvas/SVG/Elementui 文章标签：前端 javascript 开发语言

原文链接：https://juejin.cn/post/7017957779176423454#heading-0

版权

Css/Canvas/SVG/Elementui 专栏收录该内容

144 篇文章 3 订阅

订阅专栏

在不使用el-upload默认样式的场景下，可以通过设置v-show为false隐藏组件，然后通过模拟点击触发上传。在事件中调用自定义的http-request方法，如clickUploadFile，处理文件上传。成功上传后，使用clearFiles方法清除组件的文件列表。此方法适用于需要定制上传按钮外观的情况。

摘要由CSDN通过智能技术生成

有时候我们想用 el-upload 的上传功能，但又不想用 el-upload 的样式，如何实现呢？方法也很简单，隐藏 el-upload，然后再模拟点击就可以了。

<button @click="handleUpload">上传文件</button>
<el-upload
  v-show="false"
  class="upload-resource"
  multiple
  action=""
  :http-request="clickUploadFile"
  ref="upload"
  :on-success="uploadSuccess"
>
    上传本地文件
</el-upload>

<script>
export default {
    methods: {
        // 模拟点击
        handleUpload() {
            document.querySelector(".upload-resource .el-upload").click()
        },
        // 上传文件
        async clickUploadFile(file) {
            const formData = new FormData()
            formData.append('file', file.file)
            const res = await api.post(`xxx`, formData)
        }
        // 上传成功后，清空组件自带的文件列表
        uploadSuccess() {
            this.$refs.upload.clearFiles()
        }
    }
}
</script>