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我!~~

相关推荐
EMT1 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多2 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户516816614584118 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦18 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He18 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js