通过element把图片上传到后台

最新推荐文章于 2024-06-18 10:25:18 发布

JN-Lin

最新推荐文章于 2024-06-18 10:25:18 发布

阅读量2.5k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/jinann0/article/details/128222411

版权

本文介绍了在Vue后台管理系统中如何利用Element UI的上传组件实现图片上传到后端接口的步骤。包括模板代码、JavaScript代码以及data中定义的数据处理。当上传成功后，后端返回响应值，前端根据需求在成功的回调中处理数据并更新到data。

摘要由CSDN通过智能技术生成

搭建vue后台管理系统的时候碰到的上传图片到后台接口

template的代码

<el-upload
    //上传的地址
	action="#"
    //最大数量
	:limit='9'
    //成功的回调
	:on-success="handlePicSuccess"
    //超出限制数量的回调
	:on-exceed="exceedFile"
    //上传时验证文件的格式
	:before-upload="beforeUploadPic"
	list-type="picture-card"
	multiple
	ref="pictureUpload">
	<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 v-if="!disabled" 
            class="el-upload-list__item-delete" 
            // 删除
            @click="handlePicRemove(file)">
				<i class="el-icon-delete"></i>