封装 el-upload，实现可上传图片、预览图片、编辑图片、删除图片功能

最新推荐文章于 2025-04-30 14:17:55 发布

青赤黄及黑白

最新推荐文章于 2025-04-30 14:17:55 发布

阅读量1.9k

点赞数 2

文章标签： vue elementui js

本文链接：https://blog.youkuaiyun.com/qq_41775006/article/details/113524598

版权

本文介绍了一个基于Vue的图片上传组件的实现细节，该组件支持多种图片格式，具备预览、编辑及删除等功能，并能将图片数据传递给父组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

父组件

template

<el-card>
            <div>上传图片子组件</div>
            <el-form label-width="100px">
                <el-form-item label="图片：">
                    <uploadImg :limit="5" :fileList="fileList" @submitImg="getImgList"></uploadImg>
                </el-form-item>
            </el-form>
        </el-card>

script

//数据
data(){
	return:{
		fileList:[
                {name:'大宝贝',url:'https://i.ebayimg.com/00/s/ODAwWDgwMA==/z/MO4AAOSwjYFezOIR/$_12.JPG?set_id=880000500F'},
                {name:'滴滴滴',url:'https://i.ebayimg.com/00/s/OTAwWDkwMA==/z/a60AAOSwaYdfG7vI/$_12.JPG?set_id=880000500F'},  
            ],
	}
}
// 获取图片
 getImgList(list){
     this.fileList = list
 }

子组件 uploadImg （完整代码）

<template>
    <div>
        <el-upload
            :action="action"
            list-type="picture-card"
            accept=".jpg,.jpeg,.png"
            :on-success="handleSuccess"
            :file-list="fileLists"
            :headers="{username:username}"
            :disabled="fileLists.length >= limit">
            <i slot="default" 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-edit" @click="handlePictureCardEdit(file)">
                        <i class="el-icon-edit"></i>
                    </span>
                    <span 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" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-dialog :visible.sync="editView" width="40%" append-to-body>
            <el-input type="textarea" :rows="4" v-model="editForm.url" @input="editPic"></el-input>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props:{
        limit:{
            type:Number,
            default:12,
        },
        action:{
            type:String,
            default:'#'
        },
        fileList:{
            type:Array,
            default: ()=>{
                return []
            }
        }
    },
    data(){
        return{
            dialogImageUrl: '',
            dialogVisible: false,
            fileLists:this.fileList,
            editForm:{
                url:'',
                uid:null
            },
            editView:false,
            username:''
        }
    },
    mounted(){
        this.username = Cookies.get('username')
    },
    methods:{
        // 移除图片
        handleRemove(file) {
            for(let i in this.fileLists){
                if(this.fileLists[i].uid == file.uid){
                    this.fileLists.splice(i,1)
                }
            }
            this.submitFile()
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response,file,fileList){
            let obj = {
                name: file.name,
                status: "success",
                uid: file.uid,
                url: file.url,
            }
            this.fileLists.push(obj)
            this.submitFile()
        },
        // 编辑图片弹窗
        handlePictureCardEdit(file){
            this.editForm.url = file.url
            this.editForm.uid = file.uid
            this.editView = true
        },
        // 编辑图片
        editPic(){
            for(let i in this.fileLists){
                if(this.fileLists[i].uid == this.editForm.uid){
                    this.fileLists[i].url = this.editForm.url
                }
            }
            this.submitFile()
        },
        // 将图片文件传回给父组件
        submitFile(){
            this.$emit('submitImg',this.fileLists)
        },
    }
}
</script>

<style scoped>
    .el-icon-plus{
        font-size: 30px!important;
    }
    .el-icon-edit{
        font-size: 18px !important;
    }
    .el-icon-zoom-in{
        font-size: 18px !important;
    }
    .el-icon-delete{
        font-size: 18px !important;
        color:rgb(243, 143, 130);
    }
    .el-input>>> .el-textarea__inner{
        font-size:18px!important;
    }
</style>