el-upload上传文件缩略图之---查看、下载、删除

一、效果图

二、主要代码

<template>
    <div>
        <el-upload
            class="upload-demo"
            :action="actionUrl"
            :multiple="true"
            list-type="picture-card"
            :on-success="attachUploadSuccess"
            :on-error="attachError"
            :headers="headers"
            :file-list="fileDataList"
        >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
                <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    style="border-radius: 6px; width: 148px; height: 148px"
                    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
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                    >
                        <i class="el-icon-download"></i>
                    </span>
                    <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                    >
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        attachFileList: {
            type: Array,
            default: false,
        },
    },
    data() {
        return {
            fileDataList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
        }
    },
    computed: {
        actionUrl() {
            return process.env.API_SERVER + '上传接口'
        },
        headers() {
            return { token: this.$store.state.token }
        },
    },
    watch: {
        attachFileList: {
            //监听的对象
            deep: true, //深度监听设置为 true
            handler: function (newV, oldV) {
                this.fileDataList = JSON.parse(JSON.stringify(newV))
            },
        },
    },

    methods: {
        attachError(err, file, fileList) {},
        handleRemove(file) {
            let removeId = file.id
            this.fileDataList.forEach((item, index) => {
                if (item.id == removeId) {
                    this.fileDataList.splice(index, 1)
                    this.$emit('DialogOk', this.fileDataList)
                }
            })
        },
        // 预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        // 下载  imgage图片blob类型下载
        handleDownload(file) {
            let a = document.createElement('a')
            a.href = file.url
            a.download = file.name
            a.click()
        },
        attachUploadSuccess(response, file, fileList) {
            if (response.code == 200) {
                this.fileDataList.push({
                    id: response.data.id,
                    name: response.data.fileName,
                    url: response.data.url,
                })
                this.$emit('DialogOk', this.fileDataList)
            } else {
                this.$message.error(response.message)
            }
        },
    },
}
</script>

<style lang="scss"></style>