上传图片-- Elementplus

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

thingir

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

阅读量1.4k

点赞数

分类专栏： elementUI 文章标签： elementui

本文链接：https://blog.csdn.net/thingir/article/details/119826431

版权

elementUI 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

上传单个图片

                <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;
	            },
			
			}
        }