使用element的upload组件实现图片的上传
<el-upload
class="upload"
action="接口地址"
:limit="1"
:auto-upload="false"
:before-remove="beforeRemove"
:on-exceed="handleExceed"
:on-change="commitmentFilehandleUpload"
:on-error="handleFail"
:file-list="fileList"
>
<el-button type="primary" class="upload-map">上传图片</el-button>
</el-upload>
// 上传文件超出限制提示,files是选择上传的文件,fileList是已上传的文件列表
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1个文件,本次选择了 ${
files.length
} 个文件,共选择了 ${files.length + fileList.length} 个文件`
)
}
//删除图片
beforeRemove(file, fileList) {
this.$confirm(`确定移除 ${file.name}?`, {
customClass: '类名'
}).then(() => {
//图片地址
this.imageUrl = ''
})
}
// 上传图片失败提示
handleFail() {
this.$message.error(`上传图片失败!`)
},
//获取图片地址
this.imageUrl = process.env.VUE_APP_BASE_API + '下载图片的接口地址' + 确定图片的变量
属性
action
:必选参数,上传的地址
accept
:接受上传的文件类型
on-preview
:点击文件列表已上传的文件时的钩子
on-success
:文件上传成功时的钩子
on-error
:文件上传失败时的钩子
on-change
:文件状态改变时的钩子,添加文件、上传成功、上传失败时都会调用
before-remove
:删除文件之前的钩子
auto-upload
:是否在选取文件后立即进行上传
limit
:最大允许上传的个数
on-exceed
:文件超出个数限制时的钩子
file-list
:上传的文件列表