ElementUI图片上传 回显
html内容
<!-- 图片上传 -->
<el-row>
<el-col :span="24">
<el-form-item label="LOGO" prop="logoImg">
<el-upload
class="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 = true
this.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 = false
this.$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 = this
return 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.5
if (!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.width
var 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,详情可以看这里
我当时涉及的问题就是后端与前端的配合,因为有测试地址和正式地址的区别,所以需要确认好上传的具体路径,
还有就是后端需要确认上传的文件夹确实存在,细节问题一定要注意好。