el-upload完成文件上传(大小不超过20MB,支持多选,最多不超过5个,超过5个隐藏上传按钮)

1、HTML代码

ini 复制代码
<el-form-item label="文件上传:" prop="files">
    <el-upload
      ref="upload"
      :headers="{
        accessToken: getToken(),
      }"
      class="upload-demo"
      :action="UPLOAD_ADDRESS"
      :before-upload="handleBeforeUpload"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      accept=".docx, .doc, .pdf, .ppt"
      :file-list="fileList"
      multiple
      :limit="5"
      :on-exceed="handleExceed"
    >
      <div class="upload_text">
        <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
        <span slot="tip" class="el-upload__tip">至多上传5个,文件大小不超过20MB,支持扩展名:.doc .docx .pdf .ppt</span>
      </div>
    </el-upload>
</el-form-item>

注释:headers、action根据具体自己项目而定,上传接口不需要额外的请求头就不需要headers

2、Data

javascript 复制代码
data() {
    return {
      formData: {
        files: [],
      }, // 提交表单数据
      fileList: []
    }
  },

3、function

kotlin 复制代码
 // 1、文件上传之前的方法
    handleBeforeUpload(file) {
    //   console.log(file)
      // 如果验证失败,返回 false 来阻止文件上传
      const fileSize = Math.round(file.size / 1024 / 1024)
      if (fileSize > 20) {
        this.$message.error('上传文件过大,请重新选择')
        return false
      }
      return true // 如果验证通过,返回 true 来允许文件上传
    },
    
    // 2、文件上传成功要做的操作
    handleSuccess(res, file,fileList) {
      if (res.success) {
        this.$message.success('文件上传成功')
        this.formData.files.push({ fileName: res.data.fileName, url: res.data.url })
        this.$refs.formRef.clearValidate('files');
      } else {
        const index = fileList.indexOf(file);  
        if (index !== -1) {  
          fileList.splice(index, 1);  
        }  
        this.$message.error(res.msg)
      }
      if (this.formData.files.length >= 5) {
        this.$refs.upload.$el.querySelector('.el-upload').style.display = 'none' // 隐藏上传按钮
      }
    },
    
    // 3、移除已上传文件所做的操作
    handleRemove(file, fileList) {
      this.fileList = fileList
      const index = this.formData.files.findIndex(item => (item.url === file.response?.data.url || item.url === file.url)) // 确定删除的项
      if (index !== -1) {  
        this.formData.files.splice(index, 1) // 删除要删除的项
      }  
      if (this.formData.files.length < 5) {
        this.$refs.upload.$el.querySelector('.el-upload').style.display = 'block' // 开启上传按钮
      }
    },
    
    // 4、文件超出个数限制时的操作
    handleExceed() {
      this.$message.error('文件最多上传5个,请重新选择上传')
    },
相关推荐
正在学习前端的---小方同学5 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
毕业设计制作和分享6 小时前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
前端开发爱好者13 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀13 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
华仔啊16 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆16 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
岁月宁静17 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
Dolphin_海豚18 小时前
@vue/reactivity
前端·vue.js·面试
菜狗的小小笔记_19 小时前
Vue3 实用技巧
vue.js
勇敢di牛牛1 天前
vue3 + mars3D 三分钟画一个地球
前端·vue.js