vue+element之解决upload组件上传文件失败后仍显示在列表上、自动上传、过滤、findIndex、splice、filter

news2024/12/26 21:46:02

前言

el-upload上传失败后，文件仍显示在列表上。

这个pdf文件上传失败，仍显示在列表，给人错觉是上传成功，所以要把它去掉。

在element中，file-list和v-model:file-list是用于上传文件组件的两个不同属性。
1、file-list属性用于显示已上传文件列表，可以通过设置file-list属性为一个数组。数组中包含已上传文件的信息，例如文件名、大小等，element会根据这个数组来展示已上传文件列表。
2、v-model:file-list用于绑定已上传文件的双向绑定属性，通过将v-model:file-list绑定到一个变量上，可以实现上传文件的双向绑定，即当用户上传文件时，绑定的变量会更新，反之亦然。属性通常用于需要在上传文件后对文件进行处理或者在上传前对文件进行验证的场景。
file-list用于显示已上传文件列表
v-model:file-list用于实现上传文件的双向绑定。

错误案例(没有用)

前言

这是网上其他博主写的博客，并没有解决问题，还报错了。

html

<el-upload
	class="upload-file padding"
	ref="uploadFile"
	multiple
	accept="image/jpeg,image/png,image/gif,application/pdf"
	:http-request="uploadFile"
	:on-change="onChange"
	:before-upload="beforeuploadFile"
	action="123"
	:disabled="!isDisabled"
	:on-remove="handleRemove"
	:file-list="ruleForm.commission">
	<el-button type="primary" size="mini" :loading="uploadLoding" :disabled="!isDisabled">上传</el-button>
	<div slot="tip" class="el-upload__tip" style="line-height: 1; margin: 0 0 10px;">注:只能上传图片或pdf文件</div>
</el-upload>

JavaScript

handleRemove (file, fileList) {
    this.ruleForm.commission = fileList
    // 用于校验
    // this.ruleForm.fileName = ''
},
onChange (file, fileList) {
  this.files = fileList
},
// 上传
uploadFile (fileObj) {
	let file = fileObj.file
	uploadImageInfo({ file: file, width: 165, height: 245, caseId: this.caseId, taskId: this.taskId }).then(res => {
          if (res.success && res.data) {
          	// 后端接口返回后逻辑-todo
              const obj = {
              	  // 文件名带后缀
                  name: '文件名.pdf',
                  // 文件路径
                  url: data.path,
              }
              // 显示用的
              this.ruleForm.commission.push(obj)
          }
      }).catch(err => {
          console.log(err)
          // 关键作用代码，去除文件列表失败文件
          let uid = file.uid
          // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
          let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)

		  // 关键作用代码，去除文件列表失败文件
          this.$refs.uploadFile.uploadFiles.splice(idx, 1)
      })
}

正确方法

html

<el-upload v-model:file-list="form.fileList" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"
  action="/api/upload/file" :show-file-list="true" :on-progress="uploadProgress"
  :on-preview="fileViewV" :on-success="successFileFolder" :on-error="uploadError">
  <el-button type="success" size="small">上传</el-button>
</el-upload>

JavaScript

fileViewV(file) {
  window.open(file.response.response.previewPath, '_blank');
},
successFileFolder(re, file, fileList) {
  fileList = fileList.filter(item => item.response.code !== 500);
  this.form.trainData = fileList;
  if (re.code === 500) {
    this.$message.error(re.message);
  } else {
    this.$message.success(re.message);
  }
  this.loading.close();
},
uploadProgress() {
  this.loading = this.$loading({
    lock: true,
    text: '文件上传中…',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.5)'
  });
},
uploadError() {
  this.loading.close();
  this.$message.error('文件上传失败，请检查文件大小或文件格式');
}