未解决问题:照片墙底部留白
1、
<el-upload
action
multiple
ref="upload"
class="upload-demo"
:limit="limit"
:file-list="formFileList"
:accept="accept"
:on-change="handleUploadForm"
:auto-upload="false"
:on-progress="handleProgress"
:on-error="handleError"
:on-success="handleSuccess"
:on-exceed="handleExceed"
show-file-list
list-type="picture-card"
>
<i class="el-icon-plus">选择图片</i>
<div slot="file" slot-scope="{file}">
<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)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-image-viewer
v-if="showViewer"
:initial-index="this.index"
:on-close="closeViewer"
:url-list="this.urlList" />

2、
showViewer: false, // 显示查看器

3、

// 删除上传列表中文件
handleRemove(file, fileList) {
AttachApi.attachDel([file.id]).then(res => {
this.formFileList.forEach((element, i) => {
console.log(element.id)
if (file.id === element.id) {
this.formFileList.splice(i, 1)
}
})
})
},

// 图片点击下载
handleDownload(file) {
const fileUrl = file.url
window.open(fileUrl)
},

// 图片查看器
handlePictureCardPreview(file) {
for (let i = 0; i < this.formFileList.length; i++) {
this.urlList.push(this.formFileList[i].url)
}
this.index = file.index
this.showViewer = true
},