elementUi文件上传

最新推荐文章于 2025-05-22 12:10:41 发布

bigdargon

最新推荐文章于 2025-05-22 12:10:41 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： elementUi 文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/bigdargon/article/details/125995628

elementUi 专栏收录该内容

4 篇文章

订阅专栏

这篇博客详细介绍了如何配置一个前端上传组件，包括设置`auto-upload`属性为false以关闭自动上传，通过`handleBeforeUpload`限制文件大小，以及使用`this.$refs.imageUpload.submit()`手动触发上传。此外，还展示了`el-upload`组件的相关参数如`action`、`on-success`等，以实现图片预览、删除和成功回调等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：
action：必填
auto-upload：el-upload组件自动上传，默认值为true, false为关闭自动上传


/**
     * 手动上传
     */
    upLoad() {
      this.$refs.imageUpload.submit()
    },

<el-upload
          ref="imageUpload"
          :action="crmFileSaveUrl"
          :headers="httpHeader"
          :data="{type: 'img', batchId: batchId}"
          :on-preview="handleFilePreview"
          :before-remove="beforeRemove"
          :on-success="imgFileUploadSuccess"
          :file-list="imgFileList"
          :before-upload="handleBeforeUpload"
          :auto-upload="autoUpload"
          :disabled="isUpload"
          name="file"
          multiple
          accept="image/*"
          list-type="picture-card"
        />
handleBeforeUpload(file) {
      // 限制文件上传大小
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        return false
      }
    },