参考网上大神,终于可以少写几个函数了。涉及到闭包。
html:
<el-form :model="form" label-width="160px">
<el-form-item label="商品封面" style="height: 90px;">
<el-upload
:action="uploadUrl" multiple :limit='1' :file-list="fileList_1"
:class="{'disabled':fileList_1.length >= 1}" list-type="picture-card"
:on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,1)"
:on-error="(err,file,fileList)=>handleError(err,file,fileList,1)"
:on-remove="(file,fileList)=>handleRemove(file,fileList,1)"
:on-exceed="handleExceed"
:on-preview="handlePictureCardPreview">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="商品轮播" style="height: 90px;">
<el-upload
:action="uploadUrl" multiple :limit='4' :file-list="fileList_2"
:class="{'disabled':fileList_2.length >= 4}" list-type="picture-card"
:on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,2)"
:on-error="(err,file,fileList)=>handleError(err,file,fileList,2)"
:on-remove="(file,fileList)=>handleRemove(file,fileList,2)"
:on-exceed="handleExceed"
:on-preview="handlePictureCardPreview">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="商品详情" style="height: 90px;">
<el-upload
:action="uploadUrl" multiple :limit='4' :file-list="fileList_3"
:class="{'disabled':fileList_3.length >= 4}" list-type="picture-card"
:on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,3)"
:on-error="(err,file,fileList)=>handleError(err,file,fileList,3)"
:on-remove="(file,fileList)=>handleRemove(file,fileList,3)"
:on-exceed="handleExceed"
:on-preview="handlePictureCardPreview">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
<!-- 图片预览 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
data:
return {
uploadUrl: 'https://jsonplaceholder.typicode.com/posts/',
form: {
homeImgId: '',
carouselImgIds: [],
detailImgIds: [],
},
fileList_1: [],
fileList_2: [],
fileList_3: [],
dialogImageUrl: '', // 预览图片路径
dialogVisible: false, // 预览对话框是否可见
}
methods:
// 成功
handleSuccess(rep, file, fileList, index) {
this.$message.success('上传成功')
this['fileList_' + index] = fileList
},
// 失败
handleError(err, file, fileList, index) {
this.$message.error('上传失败')
this['fileList_' + index] = fileList
},
// 移除
handleRemove(file, fileList, index) {
this.$message.success('删除成功')
this['fileList_' + index] = fileList
},
// 超出限制
handleExceed(file, fileList) {
this.$message.warning('超出图片上传数量限制!')
},
// 预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
css:
// 图片
/deep/ .el-upload--picture-card, /deep/ .el-upload-list__item {width: 90px;height: 90px;position: relative;} // 盒子大小
/deep/ .el-icon-plus {width: 28px;height: 28px; position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} // 加号位置
/deep/ .disabled .el-upload--picture-card {display: none} // 超出数量限制隐藏上传按钮