ElementUI图片上传回显

html内容

<!-- 图片上传 --><el-row><el-col :span="24"><el-form-item label="LOGO" prop="logoImg"><el-uploadclass="upload-demo"ref="upload"name="logoImg":action="action":on-success="uploadSuccess"multiple:accept="accept":limit="1":show-file-list="false":on-exceed="handleExceed":on-progress="uploading":file-list="fileList":before-upload="beforeAvatarUpload"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip" style="color:#F00">注：只能上传jpg/png文件，图片尺寸必须377mm x 60mm, 且不超过500KB</div></el-upload></el-form-item><el-form-item v-show="imgShow"><img :src="imgSrc" style="width: 300px"></el-form-item></el-col></el-row>

针对up-load组件，官网有详细的解释文档，可以看这里

我大概解释下用到的属性事件等

name ：为上传的文件字段名（上传接口入参的字段名）

action ：为文件的上传地址，可以在data中定义，mounted钩子函数中对其赋值，写入后端给定的一个地址即可

data () {return {action: '',// 如果在html中携带accept则默认选择规定类型的文件，否则可以在钩子函数中判断上传的文件类型accept: ".jpg,.png", // .doc,.docx,.ppt,.xls,.xlsx,.wps,.dps,.pdf,.txt,fileList: [],}
},
mounted () {this.action = process.env.BASE_API + '/upload/dept/logo'// process.env.BASE_API为config文件下开发环境BASE_API配置地址// 或者也可以这样写 this.action = 'http://......'

on-success ：为文件上传成功时调用的函数

uploadSuccess(res) { // 图片上传成功后即调用的函数console.log('图片上传成功' + JSON.stringify(res))if (res.code === 0) {// sysUser为form表单对象，当上传成功后，后端会动将图片存储在数据库，数据库会自动为该图片生成一个名字，// 提交form表单时需要向后台发送服务器生成的图片名的字段this.sysUser.logoImg = res.data.uploadUrl// 图片上传成功之后可以拿到服务器生成的图片名，赋值给表单对象，提交时再传递给后台// console.log('上传到服务器照片名' + this.sysUser.logoImg)this.$message({message: '上传成功',type: 'success',duration: 1000})// 上传成功后为当前页面中的img赋值src，即照片回显（回显的地址是后台传递给前端的）this.imgShow = truethis.imgSrc = process.env.UPLOAD_API + res.data.uploadUrl// console.log(this.imgSrc)} else {this.$message({message: res.msg,type: 'error',duration: 1000})// this.$message.error(res.msg)}this.confirmLoading = falsethis.$refs.upload.clearFiles()}

multiple ：表示是否支持多选文件

limit ：为最大允许上传个数

show-file-list ：表示是否显示已上传文件列表

on-exceed ：为文件超出个数限制时执行的函数

handleExceed(files, fileList) { // 文件超出个数限制的钩子console.log(files)console.log(fileList)this.$message({message: `当前限制选择1个文件，本次选择了 ${files.length}个文件，共选择了${files.length + fileList.length}个文件`,type: 'warning',duration: 1000})}

on-progress ：为文件正在上传时执行的函数

uploading() { // 文件上传时的钩子console.log('正在上传...')this.confirmLoadig = true
}

file-list ：为上传的文件列表

before-upload：为上传文件之前的钩子，参数为上传的文件

beforeAvatarUpload(file) { // 上传文件之前的钩子,限制用户上传的图片格式和大小var _this = thisreturn new Promise(function(resolve, reject) {var reader = new FileReader()reader.onload = function(event) {var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)const extension = testmsg === 'jpg'const extension2 = testmsg === 'png'const isLt2M = file.size / 1024 / 1024 < 0.5if (!extension && !extension2) {_this.$alert('上传文件只能是 jpg、png格式!', '提示', { confirmButtonText: '确定' })reject()}if (!isLt2M) {_this.$alert('上传文件大小不能超过 500KB!', '提示', { confirmButtonText: '确定' })reject()}var image = new Image()image.onload = function() {var width = this.widthvar height = this.height// console.log(width)// console.log(height)if (width > 378 || width < 376) {_this.$alert('图片尺寸必须377 x 60mm !', '提示', { confirmButtonText: '确定' })reject()} else if (height > 61 || height < 59) {_this.$alert('图片尺寸必须377 x 60mm !', '提示', { confirmButtonText: '确定' })reject()} else {resolve()}}image.src = event.target.result}reader.readAsDataURL(file)})// return extension || extension2 && isLt2M}

这里面涉及一个 FileReader，详情可以看这里

我当时涉及的问题就是后端与前端的配合，因为有测试地址和正式地址的区别，所以需要确认好上传的具体路径，

还有就是后端需要确认上传的文件夹确实存在，细节问题一定要注意好。

ElementUI图片上传回显相关推荐

Java图片上传+回显技术
博主最近在项目中多次运用多ajaxfileupload上传图片技术,并带有图片回显功能,后台java也用到了自己封装得处理文件得方法,分享给大家,一起学习应用,我们不止会New 前言先说一下整体得流 ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
elementui图片上传php,vue+Element Ui 实现自动上传图片
点击上传文件按钮 beforeAvatarUpload方法自动上传1到多个图片 class="upload-demo" ref="upload" accept= ...
VUE+ElementUI图片上传的判断格式、大小、尺寸（即宽高比）完整实现。
需求分析: 表单中需要上传图片,并对图片做出限制: 1)上传图片大小不能超过 2M: 2)上传图片格式只能是jpg或png: 3)上传图片的宽高比例为2:1. 效果如图所示: 利用on-change的 ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
SpringBoot 2.0 多图片上传加回显
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 本文来源:http://r6f.cn/crEY 这两天公司 ...
Spring Boot 实现多图片上传并回显，涨姿势了～
上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可.由于是多图片上传所以用数组来接.此处应该注意参数名应该和<input> ...
Spring Boot 2.0 多图片上传加回显
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源:http://r6f.cn/crEY 这两天公司有 ...

ElementUI图片上传回显

ElementUI图片上传回显相关推荐

最新文章

热门文章

ElementUI图片上传 回显

ElementUI图片上传 回显相关推荐

最新文章

热门文章

ElementUI图片上传回显

ElementUI图片上传回显相关推荐