我们在写后台管理系统的时候，有时候需要上传图片，那么就要用到upload组件，刚好最近写项目遇到，记录一下
效果展示
点击按钮然后选择电脑里的图片，下面列表会进行图片的预览展示，提交表单便会提交图片的信息(通常是将图片转换成base64编码存入数据库中)
实现步骤
<el-upload
list-type="picture"
action=''
accept=".jpg, .png"
:limit="1"
:auto-upload="false"
:file-list="fileList"
:on-change="getFile"
:on-preview="handlePictureCardPreview"
:on-remove="handleUploadRemove"
>
<el-button size="small" type="primary" @click="uploadimg">选择图片上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件</div>
</el-upload>参数说明：
list-type: 文件列表的类型
action: 必选参数，上传的地址
accept：接受上传的文件类型，这里是jpg和png
limit：最大允许上传的个数
auto-upload：是否在选取文件后立即进行上传，这里记得填 false
file-list：上传的文件列表
on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
on-preview：点击文件列表中已上传的文件时的钩子。
on-remove：文件列表移除文件时的钩子
js部分：
通过getFile方法获取文件信息
getFile(file, fileList) {
this.getBase64(file.raw).then(res => {
const params = res
this.proofImage = params
})
},图片转base64编码：
getBase64(file) {
return new Promise(function (resolve, reject) {
const reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function () {
imgResult = reader.result
}
reader.onerror = function (error) {
reject(error)
}
reader.onloadend = function () {
resolve(imgResult)
}
})
},预览和删除
handleUploadRemove(file, fileList) {
this.proofImage = ''
this.ruleForm.message_img = ''
},
handlePictureCardPreview(file) {
console.log(this.proofImage)
},关于upload的更多相关属性，移步官方文档自行查看 点我跳转
