el-upload组件如何 阻止 按键backspace 删除 上传的文件

Question

默认情况下选中文件点击backspace 会删掉，如何阻止？

Answer 1

:before-remove="()=>false"不过这样的话是禁止所有删除哦。

Answer 2

可以在当前页面禁止退格键响应

js 屏蔽Backspace事件
function document.onkeydown() {
    if (event.keyCode == 8) { 
        if (document.activeElement.type == "text") {
            if (document.activeElement.readOnly == false)
                return true; 
            } 
        return false;
    }
}

Answer 3

<script setup>
import {onMounted, reactive, ref} from "vue"

const files = ref([]);
const params = reactive({})

// 预览文件
const dialog = reactive({
show: false,
url: '',
title: ''
})
const previewHandle = (file) => {
dialog.url = file.url
dialog.title = file.name
dialog.show = true
}

// 删除文件
const beforeRemoveHandle = (file, files) => {
return false
}

const removeHandle = (file) => {
files.value = files.value.filter(v => v.uid !== file.uid)
}

onMounted(() => {
})

</script>

<template>
<div class="resource">

<el-upload
  v-model:file-list="files"
  class="upload"
  drag
  multiple
  :auto-upload="false"
  list-type="picture"
  :before-remove="beforeRemoveHandle"
>
  <el-icon class="el-icon--upload">
    <upload-filled/>
  </el-icon>
  <div class="el-upload__text">
    拖找文件 或者 <em>点击选择文件</em>
  </div>
  <template #tip>
    <div class="el-upload__tip">
      每个文件大小不超过2M，总共大小不超过50M
    </div>
  </template>
  <template #file="{file}">
    <div class="file-item">
      <div class="img" @click="previewHandle(file)">
        <img :src="file.url"/>
      </div>
      <div class="name" @click="previewHandle(file)">{{ file.name }}</div>
      <div class="params">
        <el-space>
          <el-input v-model="params[file.name+'.name']" placeholder="名称"/>
          <el-input v-model="params[file.name+'.category']" placeholder="类别"/>
          <el-input v-model="params[file.name+'.tags']" placeholder="标签"/>
        </el-space>
      </div>
      <div class="icon" @click="removeHandle(file)">
        <el-icon size="16" class="el-icon--delete">
          <delete/>
        </el-icon>
      </div>
    </div>
  </template>
</el-upload>

<el-dialog v-model="dialog.show" :title="dialog.title">
  <template #default>
    <div style="display: flex;justify-content: center;align-items: center">
      <img :src="dialog.url" alt="图片预览"/>
    </div>
  </template>
</el-dialog>

</div>
</template>

<style lang="scss" scoped>
.resource {
width: 100%;
height: 100%;

.upload {

.file-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .img {
    cursor: pointer;
    width: 70px;

    img {
      width: 70px
    }
  }

  .name {
    cursor: pointer;
    width: calc(100% - 600px);
    font-size: 16px;
    margin-left: 8px;
  }

  .params {
    width: 500px;

    :deep(.el-input) {
      width: 33%;
    }
  }

  .icon {
    cursor: pointer;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
  }
}

}
}

</style>