代码
<template>
<el-dialog :visible.sync="dialogVisible" title="选择图片" width="50%">
<el-upload
class="upload-demo"
:action="actionUrl"
:headers="headers"
:data="{ token: token }"
:on-success="handleSuccess"
:on-error="handleError"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
:before-upload="beforeUpload"
:limit="limit"
:accept="accept"
:multiple="multiple"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传{{ limit }}个文件,且不超过 {{ size }} MB</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'ImageSelector',
props: {
actionUrl: String, // 上传图片的接口地址
headers: Object, // 上传图片时需要携带的请求头部信息
token: String, // 上传图片时需要携带的 token
limit: { // 最多上传的图片数量
type: Number,
default: 1
},
size: { // 单张图片最大的大小,单位为 MB
type: Number,
default: 10
},
accept: { // 接受上传的图片类型
type: String,
default: 'image/*'
},
multiple: { // 是否支持多选
type: Boolean,
default: false
},
defaultList: { // 默认的图片列表
type: Array,
default: () => []
}
},
data() {
return {
dialogVisible: false,
fileList: []
}
},
methods: {
// 点击确定按钮
handleConfirm() {
this.$emit('confirm', this.fileList)
this.dialogVisible = false
},
// 上传成功回调
handleSuccess(response, file, fileList) {
this.fileList = fileList
},
// 上传失败回调
handleError(err, file, fileList) {
this.$message.error('上传失败')
},
// 移除文件回调
handleRemove(file, fileList) {
this.fileList = fileList
},
// 上传前校验回调
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < this.size
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!')
return false
}
if (!isLt2M) {
this.$message.error(`上传图片大小不能超过 ${this.size} MB!`)
return false
}
return true
},
// 打开弹窗
openDialog() {
this.dialogVisible = true
},
// 关闭弹窗
closeDialog() {
this.dialogVisible = false
}
},
mounted() {
this.fileList = this.defaultList
}
}
</script>
<style>
.el-upload__tip {
font-size: 12px;
}
</style>
如何使用
<template>
<div>
<el-button @click="openImageSelector">选择图片</el-button>
<image-selector :actionUrl="uploadUrl" :defaultList="imageList" @confirm="handleImageSelect"></image-selector>
</div>
</template>
<script>
import ImageSelector from './ImageSelector'
export default {
components: {
ImageSelector
},
data() {
return {
uploadUrl: 'http://localhost:8080/upload',
imageList: []
}
},
methods: {
openImageSelector() {
this.$refs.imageSelector.openDialog()
},
handleImageSelect(fileList) {
this.imageList = fileList
}
}
}
</script>
使用时需要传入上传图片的接口地址,以及其他相关配置信息。通过 openDialog() 方法打开弹窗,选择完图片后,点击弹窗中的“确定”按钮,会触发 confirm 事件,将选择的图片列表作为参数传递出去。
文章来源地址https://www.toymoban.com/news/detail-405913.html
文章来源:https://www.toymoban.com/news/detail-405913.html
到了这里,关于选择图片的弹窗组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!