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

相关推荐
Gracemark7 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼8 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_10 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing10 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工12 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码15 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199416 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光16 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥16 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司17 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js