el-upload的使用

最新推荐文章于 2025-03-23 14:15:41 发布

熙冰

最新推荐文章于 2025-03-23 14:15:41 发布

阅读量752

点赞数

分类专栏： UI组件库文章标签： Element el-upload Vue

本文链接：https://blog.youkuaiyun.com/melodystars/article/details/103962540

版权

UI组件库专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了在Vue项目中使用Element UI库的el-upload组件进行文件上传的步骤和技巧，包括上传前的预览、限制上传类型、进度条显示、文件上传成功后的回调处理等核心功能，并探讨了如何自定义上传样式和错误处理策略。

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

<template>
  <div class="download">
    <!--
    action：必选参数，上传的地址
    accept：接受上传的文件类型
    drag：是否启用拖拽上传
    disabled：是否禁用
    file-list：上传的文件列表
    multiple：是否支持多选文件
    list-type：文件列表的类型
    limit：最大允许上传个数
    show-file-list：是否显示已上传文件列表
    -->
    <el-upload
      class="upload-demo"
      drag
      multiple
      :limit="1"
      :accept="'.jpg,.png'"
      :file-list="fileList"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-exceed="handleExceed"
      :on-preview="handlePreview"
      :before-upload="beforeAvatarUpload"
      :on-change="handleChange"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarError"
      :on-remove="handleRemove">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
    export default {
        name: 'download',
        data() {
            return {
                fileList: []
            }
        },
        methods: {
            handleExceed(files, fileList) {
                this.$message.warning('文件超出个数限制时的钩子');
            },
            handlePreview(file) {
                this.$message.warning('点击文件列表中已上传的文件时的钩子');
            },
            beforeAvatarUpload(file) {
                this.$message.success('上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传');
            },
            handleChange(file, fileList) {
                this.$message.success('文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用');
            },
            handleAvatarSuccess(res, file, fileList) {
                this.$message.success('文件上传成功时的钩子:' + res);
            },
            handleAvatarError(err, file, fileList) {
                this.$message.success('文件上传失败时的钩子:' + err);
            },
            handleRemove(file, fileList) {
                this.$message.success('文件列表移除文件时的钩子');
            },
        }
    }
</script>