element-plus el-upload 因默认自动上传导致的一系列问题

最近写了一个上传文件的需求,可累,我们的项目需求要求如下:

  1. 兼容拖拽上传和点击上传文件,可替换当前选择的文件,所以每次上传只能上传一个文件
  2. 上传并不是直接上传,需要有一个给用户再次选择的时候,如下图 那按照常规写法,我就这样写了:
html 复制代码
	<el-upload v-if="!fileValue || statusManage === 'notImportStatus'" @click.capture="actionClick"
        action="" class="upload_class" drag :show-file-list="false" :limit="1" :before-upload="beforeUPload"
        :on-exceed="exceedFile">
        <template v-if="statusManage === 'notImportStatus'">
          <img class="fileIcon" src="@/assets/upload@1x.png">
          <div class="file_name">{{ fileValue?.name }}</div>
          <div class="file_operate flex textThemeColor">
            <span class="hoverPointer" id="add-btn"> 重新上传</span>
            <span class="hoverPointer" id="delete-btn">删除</span>
            <!-- @click.stop="deleteFile" -->
          </div>
          <div class="button2 primary" id="import-btn">立即导入</div>
          <!-- @click.stop="clickImport" -->
        </template>
        <template v-else>
          <img class="fileIcon" src="@/assets/upload@1x.png">
          <div class="flex">将文件拖拽至此区域,或
            <div class="textThemeColor" id="add-btn">
              点击添加
            </div>
          </div>
          <div class="limit">支持...xsl 格式,限1,000M以内</div>
        </template>
      </el-upload>
js 复制代码
let fileValue = ref<any>(null)
const beforeUPload = (file: any) => {
  const isExcel =
    file.type === 'application/vnd.ms-excel' ||
    file.type ===
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  const isLt2M = file.size / 1024 / 1024 < 10
  if (!isExcel)
    ElMessageBox({
      title: '温馨提示',
      message: '上传文件只能是 xls / xlsx 格式!',
      type: 'warning'
    })
  if (!isLt2M)
    ElMessageBox({
      title: '温馨提示',
      message: '上传文件大小不能超过 10MB!',
      type: 'warning'
    })
  importStatus.value = EImportState.NotImport

  fileValue.value = file
  return isExcel && isLt2M
}


// 文件数超出提示
const exceedFile = () => {
  ElMessage.warning('最多只能上传一个文件!')
}

然而这样写后上传文件,总是会提示 然而就只上传了一个文件,提示的很莫名其妙,并且浏览器也会请求我上传的文件 给我搞得很懵。 最后跟同事请教下:说可能是el-upload 自动上传导致的,于是 设置 :auto-upload="false" 并且加上 :file-list="fileList",之前的 :before-upload="beforeUPload" 改成 :on-change="handleChange"

html 复制代码
	<el-upload :auto-upload="false" :file-list="fileList" :on-change="handleChange"
        v-if="!fileValue || statusManage === 'notImportStatus'" @click.capture="actionClick" action=""
        class="upload_class" drag :show-file-list="false" :limit="1" :on-exceed="exceedFile">
        <template v-if="statusManage === 'notImportStatus'">
          <img class="fileIcon" src="@/assets/upload@1x.png">
          <div class="file_name">{{ fileValue?.name }}</div>
          <div class="file_operate flex textThemeColor">
            <span class="hoverPointer" id="add-btn"> 重新上传</span>
            <span class="hoverPointer" id="delete-btn">删除</span>
            <!-- @click.stop="deleteFile" -->
          </div>
          <div class="button2 primary" id="import-btn">立即导入</div>
          <!-- @click.stop="clickImport" -->
        </template>
        <template v-else>
          <img class="fileIcon" src="@/assets/upload@1x.png">
          <div class="flex">将文件拖拽至此区域,或
            <div class="textThemeColor" id="add-btn">
              点击添加
            </div>
          </div>
          <div class="limit">支持...xsl 格式,限1,000M以内</div>
        </template>
      </el-upload>
js 复制代码
let fileValue = ref<any>(null)
const handleChange = (file: any, fileList2: any) => {
  if (!fileList2) return false
  const allowedTypes = [
    'application/vnd.ms-excel', // .xls
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // .xlsx
  ]
  // 检查文件类型
  if (!allowedTypes.includes(file.raw.type)) {
    ElMessageBox({
      title: '温馨提示',
      message: '上传文件只能是 xls / xlsx 格式!',
      type: 'warning'
    })

    fileList.value = []
    return
  }
  importStatus.value = EImportState.NotImport
  // 如果是 Excel 文件,更新文件列表 ---这部很重要
  fileList.value = fileList2
  fileValue.value = fileList2[0]
}

// 文件数超出提示
const exceedFile = (files: any[]) => {
  if (files.length > 1) {
    ElMessage.warning('最多只能上传一个文件!')
  } else {
  // 这部也重要
    fileValue.value = files[0]
  }
}

使用 :on-change 需要注意的是,在导入的时候需要注意下:

js 复制代码
  const formData = new FormData()
  // 这里append 是 fileValue.value.raw,而不是fileValue.value
  formData.append('file', fileValue.value.raw)
  const importApi = await apiPostImportData({
    encourageTypeId: defaultProps.type,
    file: formData
  })

最后成功解决上述问题,想要完整代码的可以call我!~~

相关推荐
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路2 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
1undefined23 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck4 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户3802258598244 小时前
vue3源码解析:依赖收集
前端·vue.js
wzyoung4 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
枣把儿6 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
paopaokaka_luck6 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序