Element 上传单张多张图片组件

最新推荐文章于 2024-09-28 16:11:19 发布

姥姥家的饭

最新推荐文章于 2024-09-28 16:11:19 发布

阅读量252

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41950190/article/details/116747066

版权

vue 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

// 多张图片上传
<template>
    <div class='app-content'>
        <el-upload action="#" 
            list-type="picture-card" 
            :file-list="fileList" 
            :on-preview="handlePictureCardPreview" 
            :http-request="request" 
            :on-remove="handleRemove" 
            :before-upload="beforeAvatarUpload" 
            multiple>
            <i class="el-icon-plus"></i>
        </el-upload>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props: {
            imageList: {
                type: Array,
                default: () => []
            }
        },
        model: {
            prop: 'imageList',
            event: 'onImages'
        },
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                headers: {
                    Authorization: this.getItem('token')
                },
                fileList: [],
            };
        },
        mounted() {
            console.log(this.imageList);
            this.fileList = this.imageList
        },
        methods: {
            beforeAvatarUpload(file) {
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                const extension = testmsg === 'jpg' || testmsg === 'JPG' || testmsg === 'png' || testmsg === 'PNG';
                const isLt50M = file.size / 1024 / 1024 < 20

                if (!extension) {
                    this.$message({
                        message: '上传文件只能是jpg或者png格式!',
                        type: 'error'
                    });
                    return false; 
                }
                if (!isLt50M) {
                    this.$message({
                        message: '上传文件大小不能超过 20MB!',
                        type: 'error'
                    });
                    return false;
                }
                return extension || isLt50M
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 覆盖默认上传行为
            request(file) {

                let formData = new FormData();
                formData.append('file', file.file)
				
                this.post('/local-mall/api/', formData).then(res => {
                    if (res) {
                        this.fileList.push({ url: res.data.imgUrl });
                        this.$emit('onImages', this.fileList);
                    }
                })

            },
            // 删除图片
            handleRemove(file, fileList) {
                
                // 删除服务器图片
                this.delete('deleteImages', {url: file.url}).then(res=>{
                    if(res) {
                        this.fileList = this.fileList.filter(item => item.url != file.url);
                        this.$emit('onImages', this.fileList)
                    }
                })

                
            },

        },
    };
</script>

// 单张图片上传
<template>
    <div class="head-upload">

        <el-upload 
            class="avatar-uploader" 
            :headers="headers" 
            :action="http + '/local-mall/api/common/uploadFile'" 
            :show-file-list="false" 
            :on-success="handleAvatarSuccess" 
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>
<script>
    export default {
        props: {
            imgUrl: {
                type: String,
                default: ''
            }
        },
        model: {
            prop: 'imgUrl',
            event: 'onEime'
        },
        data() {
            return {
                imageUrl: '',
                headers: {
                    Authorization: this.getItem('token'),
                    device: 'admin'
                },
            };
        },
        mounted() {

        },
        methods: {
            beforeAvatarUpload(file) {
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                const extension = testmsg === 'jpg' || testmsg === 'JPG' || testmsg === 'png' || testmsg === 'PNG';
                const isLt50M = file.size / 1024 / 1024 < 20

                if (!extension) {
                    this.$message({
                        message: '上传文件只能是jpg或者png格式!',
                        type: 'error'
                    });
                    return false;
                }
                if (!isLt50M) {
                    this.$message({
                        message: '上传文件大小不能超过 20MB!',
                        type: 'error'
                    });
                    return false;
                }
                return extension || isLt50M
            },
            handleAvatarSuccess(res) {
                console.log(res);
                this.imageUrl = res.data.imgUrl
                this.$emit('onEime', this.imageUrl)
            },
        },
    };
</script>

<style lang='less' scoped>

.head-upload {
    /deep/.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    /deep/.avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }


    /deep/.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
}

    
</style>