实现效果:因为文件上传使用的是element 的upload组件,现在甲方要求对每个文件要有对应的描述,一个方法是修改element组件的源码,比较繁琐,因此自定义一个fileList的数组,用于已上传文件的列表展示,将el-upload组件的文件列表进行隐藏,以此达到为文件添加描述的效果。
html部分:
首先使用ul,li进行fileList的for循环,进行文件展示,可在此处自定义想要的展示效果。
之后为el-upload组件设置:show-file-list="false",隐藏其文件列表
<template>
<el-button @click="tanchaung">按钮</el-button>
<el-dialog v-model="tcxianshi" width="60%">
<el-form :model="formState" ref="ruleFormRef1" :rules="rules">
<el-form-item label="文件:" label-width="100px" prop="laplTime">
<div class="fileFormItem">
<ul class="fileListUl">
<li class="fileListLi" v-for="item in fileList" :key="item.url">
<div class="fileNameDiv" @click="handlePreview(item)">
<img src="../assets/icon/file.svg" style="width: 1em; height: 1em;">
{{ item.name }}
</div>
<div class="fileDesDiv">
<span class="fileDesSpan">文件描述:</span>
<el-input
class="input11"
v-model="item.descript"
></el-input>
</div>
<div class="deleteIcon" @click="deleteFile(item)">
删除
</div>
</li>
</ul>
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="handleSuccess"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button type="primary">点击上传</el-button>
<template #tip>
<div class="el-upload__tip">
<!-- jpg/png files with a size less than 500KB. -->
</div>
</template>
</el-upload>
</div>
</el-form-item>
</el-form>
</el-dialog>
</template>
js部分:
// 数据定义
let data = reactive({
formState: {}, // 表单状态数据
});
// 引用定义
const ruleFormRef1 = ref(); // 表单引用
let tcxianshi = ref(false); // 控制对话框显示状态
// 方法定义
function tanchaung() {
tcxianshi.value = true; // 显示对话框
}
// 文件列表数据定义
const fileList = ref([
{
name: "element-plus-logo.svg",
url: "https://element-plus.org/images/element-plus-logo.svg",
descript: "", // 文件描述
},
{
name: "element-plus-logo2.svg",
url: "https://element-plus.org/images/element-plus-logo.svg",
descript: "", // 文件描述
},
]);
// 表单校验规则定义
const rules = reactive({
planName: [{ required: true, message: "请输入计划名", trigger: "blur" }],
});
// 删除文件方法
function deleteFile(val){
console.log('当前删除文件', val);
console.log('当前存在文件', fileList.value);
var length = fileList.value.length;
for (var i = 0; i < length; i++) {
if (fileList.value[i].uid == val.uid) {
fileList.value.splice(i, 1); //删除下标为i的元素
return fileList.value;
}
}
console.log('当前存在文件', fileList.value);
};
// 处理文件删除事件
const handleRemove = (file, uploadFiles) => {
console.log(file, uploadFiles);
console.log("handleRemove fileList已有文件", fileList.value);
};
// 处理文件预览事件
const handlePreview = (uploadFile) => {
console.log(uploadFile);
console.log("handlePreview fileList已有文件", fileList.value);
};
// 处理文件超出限制事件
const handleExceed = (files, uploadFiles) => {
ElMessage.warning(
`The limit is 3, you selected ${files.length} files this time, add up to ${
files.length + uploadFiles.length
} totally`
);
};
// 文件删除前的确认操作
const beforeRemove = (uploadFile, uploadFiles) => {
return ElMessageBox.confirm(
`确认删除 ${uploadFile.name} ?`
).then(
() => true,
() => false
);
};
// 文件上传成功后的处理
const handleSuccess = (file, uploadFiles) => {
console.log("上传成功 ", file, uploadFiles);
console.log("handleSuccess fileList已有文件", fileList.value);
ElMessage({
message: '上传成功',
type: 'success',
})
fileList.value[fileList.value.length - 1].descript = "";
};
// 解构获取响应式数据
let { formState } = toRefs(data);