el-upload上传图片的放大、下载、删除(使用el-image-viewer)
转载
未解决问题:照片墙底部留白
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
},
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。