上传图片-- Elementplus

最新推荐文章于 2025-10-09 15:11:19 发布

原创最新推荐文章于 2025-10-09 15:11:19 发布 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

elementUI 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了使用Vue和React实现上传图片功能的三种情况：单图上传、不限数量多图上传和限制数量多图上传。通过`el-upload`组件展示，展示了如何处理图片上传、成功回调和文件列表管理。

上传单个图片

                <el-upload class="dl-avatar-uploader-min square" 
                    :action="uploadUrl"
                    :show-file-list="false"
                    :on-success="handleUpImage"
                    list-type="picture"
                    >
                <img v-if="addform.hole_image" :src="addform.hole_image" class="avatar" title="点击重新上传"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

		setup() { 
	        const dataSet = reactive({
	            uploadUrl:'/api/common/upload',
	            fileList:[]
	        })
			const methods  {
				handleUpImage(res){
	                dataSet.addform.hole_image = res.data.url;
	            },
			
			}
        }

上传多个图片，无限制数量

                <el-upload class="dl-avatar-uploader-min square" 
                    :action="uploadUrl"
                    :on-success="handleUpAvatar"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture-card"
                    >
                    <i  class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

		setup() { 
	        const dataSet = reactive({
	            uploadUrl:'/api/common/upload',
	            fileList:[]
	        })
			const methods  {
				handleUpAvatar(res){
	                dataSet.fileList.push(res.data);
	            },
	            //删除已上传图片
	            handleRemove(file,fileList){  
	                dataSet.fileList = fileList;
	            },
			
			}
        }

上传多个图片，有限制数量

                <el-upload class="dl-avatar-uploader-min square" 
                    :action="uploadUrl"
                    :on-success="handleUpAvatar"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :limit="9"
                    list-type="picture-card"
                    >
                    <i  class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

		setup() { 
	        const dataSet = reactive({
	            uploadUrl:'/api/common/upload',
	            fileList:[]
	        })
			const methods  {
				handleUpAvatar(res){
	                dataSet.fileList.push(res.data);
	            },
	            //删除已上传图片
	            handleRemove(file,fileList){  
	                dataSet.fileList = fileList;
	            },
			
			}
        }