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个,请重新选择上传')
    },
相关推荐
十一吖i2 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
菜鸟una7 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
桃子不吃李子7 小时前
nextTick的使用
前端·javascript·vue.js
小二·9 小时前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
前端 贾公子10 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
qq_4198540510 小时前
自定义组件(移动端下拉多选)中使用 v-model
前端·javascript·vue.js
你的电影很有趣10 小时前
lesson74:Vue条件渲染与列表优化:v-if/v-show深度对比及v-for key最佳实践
前端·javascript·vue.js
Onlyᝰ12 小时前
前端tree树
javascript·vue.js·elementui
葡萄城技术团队13 小时前
Vue 生态下前端 Excel 导入导出终极方案:SpreadJS 实战指南
vue.js
哟哟耶耶13 小时前
Starting again company 03
前端·javascript·vue.js