背景:elementui中的上传组件想限制,只上传一张图片,文档里面有一个limit属性可控制最大允许上传的个数,但是上传了一张之后仍然有继续上传的操作
解决办法:上传一张成功之后,通过样式控制上传按钮的隐藏,删除上传的文件之后,再让上传按钮出现
主要代码::class="{ hide: item.hideUpload }"
定义变量hideUpload控制显示与隐藏
let formDatas = $ref({
dataList: [
{
busType: '1', // 1收银台整体背景
name: '收银台整体背景',
fileId: '',
fileName: '',
fileList: [],
hideUpload: false,
},
{
busType: '2', // 2产品信息背景
name: '产品信息背景',
fileId: '',
fileName: '',
fileList: [],
hideUpload: false,
},
{
busType: '3', // 3支付方式背景
name: '支付方式背景',
fileId: '',
fileName: '',
fileList: [],
hideUpload: false,
},
{
busType: '4', // 4价格选中背景
name: '价格选中背景',
fileId: '',
fileName: '',
fileList: [],
hideUpload: false,
},
{
busType: '5', // 5价格背景
name: '价格背景',
fileId: '',
fileName: '',
fileList: [],
hideUpload: false,
},
],
})
在上传和删除回调方法中控制变量
// 上传
const handleImport = async (file, type) => {
try {
const params = new FormData()
params.append('file', file.file)
let res = await fileUpload(params)
formDatas.dataList.map((item) => {
if (item.busType == type) {
item.hideUpload = true // 隐藏上传按钮
item.fileId = res.fileId
item.fileName = res.fileName
}
})
} catch (error) {
console.log(error)
proxy.$modal.msgError('上传失败')
}
}
// 删除方法
const handleRemove = (file) => {
console.log(file)
formDatas.dataList.map((item) => {
if (item.fileList[0]&&item.fileList[0].uid == file.uid) {
item.fileList = []
item.fileId = ''
item.fileName = ''
item.hideUpload = false // 显示上传按钮
}
})
}
html代码:
<!-- 收银台背景 -->
<el-form
ref="formRef"
:model="formDatas"
label-width="120px"
:rules="formRules"
>
<el-row :gutter="20">
<el-col
:span="8"
v-for="(item, index) in formDatas.dataList"
:key="index"
>
<el-form-item
:label="item.name"
:prop="'dataList.' + index + '.fileList'"
:rules="formRules.fileList"
>
<el-upload
style="width: 200px"
:class="{ hide: item.hideUpload }"
ref="imgUploadRef"
action=""
:limit="1"
v-model:file-list="item.fileList"
list-type="picture-card"
accept=".jpg,.png,.jpeg"
:http-request="(params) => handleImport(params, index + 1)"
:headers="headers"
:before-upload="imgBeforeAvatarUpload"
>
<template #file="{ file }">
<div>
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in /></el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
样式部分:
:deep(.hide .el-upload--picture-card) {
display: none;
}