<template>
<div class="form-page">
<el-form ref="inform" v-loading="loading || searchLoading" label-width="120px" :model="inform" :rules="rules" :inline="true" class="cus-form">
<el-col :span="24" class="img-upload-border">
<el-form-item prop="attchFiles">
<el-upload
:action="action"
:headers="headers"
list-type="picture-card"
:on-preview="handlePreview"
:auto-upload="true"
:file-list="fileList"
:accept="accept"
:on-success="successHandler"
:limit="4"
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:on-exceed="exceed"
>
<i slot="default" class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<span class="notice" style="display: block">
*注:上传线索图片,最少3张最多4张图片。每张图片大小不超过5MB。文件类型支持bmp、jpg、jpeg、png。
</span>
</el-col>
</el-form>
</div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
name: 'ClueAddEbike',
data() {
var validateWfzp = (rule, value, callback) => {
if (!value || value.length < 3) {
callback(new Error('请上传3~4张线索照片'))
} else {
callback()
}
}
return {
loading: false,
disabled: false,
action: window._config.default_service + 'comm/file/uploadPic',
ebikeSearch: window._config.ebike_search,
accept: '.bmp,.jpg,.jpeg,.png',
acceptList: ['bmp', 'jpg', 'jpeg', 'png'],
headers: '',
dialogImageUrl: '',
dialogVisible: false,
fileList: [],
rules: {
attchFiles: [
{ validator: validateWfzp, trigger: 'blur' }
]
},
roadVisible: false
}
},
created() {
this.headers = { token: getToken() }
},
methods: {
beforeUpload(file) {
return new Promise((resolve, reject) => {
if (file && file.size > 1024 * 1024 * window._config.max_uploadSize) {
this.$message({
type: 'warning',
message: `单张图片不能超过${window._config.max_uploadSize}M`
})
return reject(false)
}
if (file) {
let suffix = file.name.substring(file.name.indexOf('.') + 1, file.name.length)
if (!this.acceptList.includes(suffix)) {
this.$message({
type: 'warning',
message: `图片类型错误`
})
return reject(false)
}
}
return resolve(true)
})
},
beforeRemove(file, fileList) {
if (file && file.status === 'success') {
return this.$confirm(`确定移除 ${file.name}?`)
}
},
handleRemove(file, fileList) {
if (file && file.status === 'success') {
this.fileList = fileList
let data = file.response.data[0]
let dataParam = `bucketName=${data.bucketName}&objectName=${data.objectName}`
delFile(dataParam)
this.inform.attchFiles = _.filter(this.inform.attchFiles, item => {
return item.wjmc !== data.objectName
})
}
},
handlePreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
successHandler(response, file, fileList) {
this.fileList = fileList
let resData = response.data[0]
let json = {
wjdz: resData.bucketName,
ywlx: 'inform_file',
wjmc: resData.objectName
}
this.inform.attchFiles.push(json)
},
exceed(file, fileList) {
this.$message({
type: 'warning',
message: '最多上传4张'
})
return false
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/form.scss';
.img-list {
width: 236px;
height: 150px;
margin-top: 1rem;
margin-right: 10px;
}
.img-out-border {
width: 98%;
margin-top: 1rem;
display: inline-block;
text-align: center;
border: 1px dashed #797979;
border-radius: 4px;
span {
color: #ccc;
font-size: 14px;
font-weight: 400;
display: flow-root;
margin-bottom: 10px;
}
}
.img-inner-border {
height: 172px;
display: inline-block;
margin: 30px 0 10px 0;
border: 1px solid #ccc;
.img-container {
width: 280px;
height: 158px;
margin: 6px 10px
}
}
.img-upload-border {
border: 1px dashed #797979;
border-radius: 4px;
padding: 22px 5px 0 8px;
width: 90%;
}
</style>
vue+element-ui上传图片
于 2023-03-21 17:25:00 首次发布