element上传图片校验尺寸

<template><div class="idea-container"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"><el-form-item label="创意名称" prop="name" class="form-container"><el-input v-model="ruleForm.name" placeholder="请输入创意名称" maxlength="40"></el-input></el-form-item><el-form-item label="创意类型" prop="form"><el-radio-group v-model="ruleForm.form" @change="ideaTypeChange(ruleForm.form)" :disabled="isEdit"><el-radio-button :label="item.id" v-for="(item,index) in ext.formList" :key="`o${index}`">{{ item.name }}</el-radio-button></el-radio-group></el-form-item><!--1. 创意类型--开屏--><template v-if="ruleForm.form === 8"><el-form-item label="上传素材" prop="material" class="form-container"><el-uploadaction=""class="avatar-uploader":http-request="((file) => { handleUpload(file,ruleForm.style) })":show-file-list="false":before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })"><img v-if="imgUrlObj.screenMaterialUrl" class="avatar":src="`http://ssp-/${imgUrlObj.screenMaterialUrl}`"><template v-if="!imgUrlObj.screenMaterialUrl"><i class="el-icon-plus avatar-uploader-icon"></i><div class="el-upload__text">点击添加图片</div><div class="el-upload__size">图片大小1080*1620</div><div class="el-upload__wh">支持png/jpg/gif,小于200KB</div><spanclass="el-upload-list__item-delete"@click="handleRemove(file)"><i class="el-icon-delete"></i></span></template></el-upload></el-form-item></template><!--2. 创意类型--信息流--><template v-if="ruleForm.form === 10"><el-form-item label="样式控制" prop="style"><el-col><el-radio-group v-model="flowStyle" @change="styleTypeChange(flowStyle,'flowStyle')"><el-radio-button :label="item.id" v-for="(item,index) in ext.flowStyleList" :key="`o${index}`">{{ item.name }}</el-radio-button></el-radio-group></el-col></el-form-item><!--2-1 样式控制-一图一文--><template v-if="ruleForm.style === 1"><el-form-item label="上传素材" prop="material" class="form-container"><el-uploadaction=""class="avatar-uploader":http-request="((file) => { handleUpload(file,ruleForm.style) })":show-file-list="false":before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })"><img v-if="imgUrlObj.flowMaterialUrl1" class="avatar":src="`http://ssp-/${imgUrlObj.flowMaterialUrl1}`"><template v-if="!imgUrlObj.flowMaterialUrl1"><i class="el-icon-plus avatar-uploader-icon"></i><div class="el-upload__text">点击添加图片</div><div class="el-upload__size">图片大小480*360</div><div class="el-upload__wh">支持png/jpg/gif,小于200KB</div></template></el-upload></el-form-item></template><!--2-2 样式控制-三图一文--><template v-if="ruleForm.style === 2"><el-form-item label="上传素材" prop="material"><el-uploadv-for="(item,index) in imgArr":key="`o${index}`"style="display: inline-block; margin-right: 20px;"action=""class="avatar-uploader":http-request="((data) => { handleUpload(data,`2${index + 1}`) })":show-file-list="false":before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })"><img v-if="`${imgUrlObj['flowMaterialUrl2' + (index + 1)]}`" class="avatar":src="`http://ssp-/${imgUrlObj['flowMaterialUrl2' + (index + 1)]}`"><template v-if="!`${imgUrlObj['flowMaterialUrl2' + (index + 1)]}`"><i class="el-icon-plus avatar-uploader-icon"></i><div class="el-upload__text">点击添加图片</div><div class="el-upload__size">图片大小{{ item }}</div><div class="el-upload__wh">支持png/jpg/gif,小于200KB</div></template></el-upload></el-form-item></template><!--2-3 样式控制-大图一文--><template v-if="ruleForm.style === 3"><el-form-item label="上传素材" prop="material" class="form-container"><el-uploadaction=""class="avatar-uploader":http-request="((file) => { handleUpload(file,ruleForm.style) })":show-file-list="false":before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })"><img v-if="imgUrlObj.flowMaterialUrl3" class="avatar":src="`http://ssp-/${imgUrlObj.flowMaterialUrl3}`"><template v-if="!imgUrlObj.flowMaterialUrl3"><i class="el-icon-plus avatar-uploader-icon"></i><div class="el-upload__text">点击添加图片</div><div class="el-upload__size">图片大小720*360</div><div class="el-upload__wh">支持png/jpg/gif,小于200KB</div></template></el-upload></el-form-item></template><el-form-item label="广告标题" prop="title" class="form-container"><el-input v-model="ruleForm.title" placeholder="请输入广告标题"></el-input></el-form-item><el-form-item label="广告来源" prop="origin" class="form-container"><el-input v-model="ruleForm.origin" placeholder="请输入广告来源"></el-input></el-form-item></template><!--3. 创意类型--激励视频--><template v-if="ruleForm.form === 11"><el-form-item label="样式控制" prop="style"><el-col><el-radio-group v-model="inspireStyle" @change="styleTypeChange(inspireStyle,'inspireStyle')"><el-radio-button :label="item.id"v-for="item in ext.inspireStyleList":key="item.id">{{ item.name }}</el-radio-button></el-radio-group></el-col></el-form-item><el-form-item label="上传素材" prop="material" class="form-container"><el-uploadaction=""class="avatar-uploader":http-request="((file) => { handleVideoUpload(file,'') })":show-file-list="false":before-upload="((file) => { beforeVideoUpload(file,628,228,200) })"><video v-if="imgUrlObj.videoMaterialUrl" class="avatar":src="`http://ssp-/${imgUrlObj.videoMaterialUrl}`"/><template v-if="!imgUrlObj.videoMaterialUrl"><i class="el-icon-plus avatar-uploader-icon"></i><div class="el-upload__text">点击添加视频</div><div class="el-upload__size">图片大小{{videoWidth}}*{{videoHeight}}</div><div class="el-upload__wh">支持png/jpg/gif,小于200KB</div></template></el-upload></el-form-item><el-form-item label="广告icon" prop="icon" class="form-container"><el-uploadaction=""class="avatar-uploader":http-request="((file) => { handleUpload(file,'icon') })":show-file-list="false":before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })"><img v-if="imgUrlObj.iconUrl" class="avatar":src="`http://ssp-/${imgUrlObj.iconUrl}`"><template v-if="!imgUrlObj.iconUrl"><i class="el-icon-plus avatar-uploader-icon"></i><div class="el-upload__text">点击添加图片</div><div class="el-upload__size">图片大小96*96</div><div class="el-upload__wh">支持png/jpg/gif,小于200KB</div></template></el-upload></el-form-item><el-form-item label="背景图" prop="bgUrl" class="form-container"><el-uploadaction=""class="avatar-uploader":http-request="((file) => { handleUpload(file,'bg') })":show-file-list="false":before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })"><img v-if="imgUrlObj.bgUrl" class="avatar":src="`http://ssp-/${imgUrlObj.bgUrl}`"><template v-if="!imgUrlObj.bgUrl"><i class="el-icon-plus avatar-uploader-icon"></i><div class="el-upload__text">点击添加图片</div><div class="el-upload__size">图片大小1280*720</div><div class="el-upload__wh">支持png/jpg/gif,小于200KB</div></template></el-upload></el-form-item><el-form-item label="广告标题" prop="title" class="form-container"><el-input v-model="ruleForm.title" placeholder="请输入广告标题" maxlength="33"></el-input></el-form-item><el-form-item label="广告描述" prop="desc" class="form-container"><el-input v-model="ruleForm.desc" placeholder="请输入广告来源" maxlength="10"></el-input></el-form-item></template><!--4. 创意类型--插屏--><template v-if="ruleForm.form === 7"><el-form-item label="上传素材" prop="material" class="form-container"><el-uploadaction=""class="avatar-uploader":http-request="((file) => { handleUpload(file,'') })":show-file-list="false":before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })"><img v-if="imgUrlObj.insertMaterialUrl" class="avatar":src="`http://ssp-/${imgUrlObj.insertMaterialUrl}`"><template v-if="!imgUrlObj.insertMaterialUrl"><i class="el-icon-plus avatar-uploader-icon"></i><div class="el-upload__text">点击添加图片</div><div class="el-upload__size">图片大小960*1200</div><div class="el-upload__wh">支持png/jpg/gif,小于200KB</div></template></el-upload></el-form-item></template><!--跳转类型--><div style="display: flex;"><el-form-item label="跳转类型" prop="urlType" class="form-container wid40"><el-radio v-model="ruleForm.urlType":label="item.id"@change="skipTypeChange"v-for="(item,index) in ext.urlType":key="`o${index}`">{{ item.name }}</el-radio></el-form-item></div><template v-if="ruleForm.urlType === 1"><el-form-item label="" prop="url" class="form-container"><el-input v-model="ruleForm.url" placeholder="请输入链接"></el-input></el-form-item></template><template v-if="ruleForm.urlType === 2"><div class="extra"><el-form-item label="" prop="downloadUrlAndroid" class="form-container fa-node"><el-input v-model="ruleForm.downloadUrlAndroid" placeholder="请输入Android下载地址"class="inline-input"></el-input><span class="child-node">Android</span></el-form-item></div><div class="extra"><el-form-item label="" prop="downloadUrlIos" class="form-container fa-node"><el-input v-model="ruleForm.downloadUrlIos" placeholder="请输入iOS下载地址"></el-input><span class="child-node">iOS</span></el-form-item></div><div class="extra"><el-form-item label="安卓包名" prop="downloadUrlIos" class="form-container fa-node"><el-input v-model="ruleForm.downloadNameAndroid" placeholder="请输入安卓包名"></el-input><span class="child-node">Android</span></el-form-item></div></template><!--deeplink链接--><el-form-item label="deeplink链接" prop="deeplinkAndroid" class="form-container fa-node"><el-input v-model="ruleForm.deeplinkAndroid" placeholder="请输入Android的deeplink链接"></el-input><span class="child-node">Android</span></el-form-item><el-form-item label="" prop="deeplinkIos" class="form-container fa-node"><el-input v-model="ruleForm.deeplinkIos" placeholder="请输入iOS的deeplink链接"></el-input><span class="child-node">iOS</span></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button><el-button @click="cancelSubmit">取消</el-button></el-form-item></el-form></div></template><script>export default {name: 'EditIdea',data() {return {disabled: false,width: 100,height: 200,videoWidth: 1280,videoHeight: 720,inspireStyle: 1,flowStyle: 1,isEdit: false,imgArr: ['480*360', '480*360', '480*360'],ruleForm: {name: '',form: 8,material: [],urlType: 1,url: '',downloadUrlAndroid: '',downloadUrlIos: '',downloadNameAndroid: '',deeplinkAndroid: '',deeplinkIos: '',style: 1,title: '',desc: '',origin: '',},rules: {name: [{required: true,message: '请输入创意名称',trigger: 'blur'},],form: [{required: true,message: '请选择创意类型',trigger: 'change'},],style: [{required: true,message: '请选择样式控制',trigger: 'blur'},],title: [{required: true,message: '请输入广告标题',trigger: 'blur'},],origin: [{required: true,message: '请输入广告来源',trigger: 'blur'},],desc: [{required: true,message: '请输入广告描述',trigger: 'blur'},],deeplinkAndroid: [{required: true,message: '请输入Android的deeplink链接',trigger: 'blur'},],deeplinkIos: [{required: true,message: '请输入iOS的deeplink链接',trigger: 'blur'},],},ext: {},imgUrlObj: {screenMaterialUrl: '',flowMaterialUrl1: '',flowMaterialUrl21: '',flowMaterialUrl22: '',flowMaterialUrl23: '',flowMaterialUrl3: '',videoMaterialUrl: '',insertMaterialUrl: '',iconUrl: '',bgUrl: '',},uploadSuccessflag: false,isSize: null}},created() {this.$route.query.isEdit === '1' ? this.isEdit = true : this.isEdit = false// 获取额外配置信息this.getExtConfigInfo()// 获取详情-编辑页面this.isEdit && this.getEditDetail()},methods: {// 拉取额外配置信息getExtConfigInfo() {let params = {}this.$request.get('admin/creative/add', params).then((res) => {this.ext = res.ext})},// 根据id，获取页面详情数据getEditDetail() {let params = {id: this.$route.query.id,}this.$request.get('/admin/creative/edit', params).then((res) => {// 回显数据let creativeList = res.creativeListcreativeList.creative_config.name = creativeList.namecreativeList.creative_config.id = creativeList.idcreativeList.creative_config.form = creativeList.formthis.ruleForm = creativeList.creative_configif (creativeList.form === 8) {// 开屏图this.imgUrlObj.screenMaterialUrl = this.ruleForm.material[0]} else if (creativeList.form === 10) {// ----------信息流 ------------- 回显图片if (this.ruleForm.style === 1) {// 信息流 一图一文this.imgUrlObj.flowMaterialUrl1 = this.ruleForm.material[0]} else if (this.ruleForm.style === 2) {// 信息流 三图一文this.imgUrlObj.flowMaterialUrl21 = this.ruleForm.material[0]this.imgUrlObj.flowMaterialUrl22 = this.ruleForm.material[1]this.imgUrlObj.flowMaterialUrl23 = this.ruleForm.material[2]} else {// 信息流 大图一文this.imgUrlObj.flowMaterialUrl3 = this.ruleForm.material[0]}this.flowStyle = this.ruleForm.style} else if (creativeList.form === 11) {// 激励视频this.imgUrlObj.iconUrl = this.ruleForm.iconthis.imgUrlObj.bgUrl = this.ruleForm.bgUrlthis.imgUrlObj.videoMaterialUrl = this.ruleForm.material[0]this.inspireStyle = this.ruleForm.style} else if (creativeList.form === 7) {// 插屏this.imgUrlObj.insertMaterialUrl = this.ruleForm.material[0]}})},// 封装公共校验方法：上传图片前校验上传规则beforeAvatarUpload(file, ruleWidth, ruleHeight, size) {let width = ruleWidthlet height = ruleHeightconst isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'const isLt2M = file.size / 1024 <= size!isJPG && this.$message.error('上传的图片接受JPG，PNG格式，GIF')!isLt2M && this.$message.error(`上传的图片大小不能超过 ${size}KB!`)// 校验宽高this.isSize = new Promise(function(resolve, reject) {let _URL = window.URL || window.webkitURLlet img = new Image()img.onload = function() {let valid = img.width >= width && img.height >= heightvalid ? resolve() : reject(new Error('error..'))}img.src = _URL.createObjectURL(file)}).then(() => {if (isJPG && isLt2M) {// 图片格式，大小，宽高都为truethis.uploadSuccessflag = true}return file}, () => {this.uploadSuccessflag = falsethis.$message.error(`上传文件的图片大小不符合标准,宽需要为${ruleWidth}px，高需要为${ruleHeight}px`)return Promise.reject(new Error('error..'))})},// 视频上传前beforeVideoUpload(file) {console.log(file, '.......beforeVideoUpload........')},// 视频上传操作handleVideoUpload(file) {console.log(file, '.......video...upload.....')},handleRemove(file, fileList) {console.log(file, fileList)},// 上传图片handleUpload(file, type) {console.log('handleUpload....start.....')console.log(this.uploadSuccessflag, 'handleUpload...this.flag...')const formData = new FormData()formData.append('file', file.file)// 判断图片宽高时，图片onload是异步的，ajax请求时机需要在此后执行this.isSize.then(() => {if (this.uploadSuccessflag) {this.$request.post('/admin/upload/index', formData, { mock: false }).then((res) => {console.log(type, '----------------type---------------')console.log(this.ruleForm.form, 'handleUpload...this.ruleForm.form....')if (this.ruleForm.form === 8) {// 开屏图console.log(type, '-------------开屏图------------------')this.imgUrlObj.screenMaterialUrl = res.fileNamethis.ruleForm.material = [this.imgUrlObj.screenMaterialUrl]} else if (this.ruleForm.form === 10 && this.ruleForm.style === 1) {// 信息流--一图一文this.imgUrlObj.flowMaterialUrl1 = res.fileNamethis.ruleForm.material = [this.imgUrlObj.flowMaterialUrl1]} else if (this.ruleForm.form === 10 && this.ruleForm.style === 2 && parseInt(type) === 21) {// 信息流--三图一文console.log(type, '---------------信息流--三图一文1----------------')this.imgUrlObj.flowMaterialUrl21 = res.fileNamethis.ruleForm.material[0] = this.imgUrlObj.flowMaterialUrl21} else if (this.ruleForm.form === 10 && this.ruleForm.style === 2 && parseInt(type) === 22) {// 信息流--三图一文console.log(type, '------------信息流--三图一文2-------------------')this.imgUrlObj.flowMaterialUrl22 = res.fileNamethis.ruleForm.material[1] = this.imgUrlObj.flowMaterialUrl22} else if (this.ruleForm.form === 10 && this.ruleForm.style === 2 && parseInt(type) === 23) {// 信息流--三图一文console.log(type, '------------信息流--三图一文3-------------------')this.imgUrlObj.flowMaterialUrl23 = res.fileNamethis.ruleForm.material[2] = this.imgUrlObj.flowMaterialUrl23} else if (this.ruleForm.form === 10 && this.ruleForm.style === 3) {// 信息流--大图一文console.log(type, '------------信息流--三图一文3-------------------')this.imgUrlObj.flowMaterialUrl3 = res.fileNamethis.ruleForm.material = [this.imgUrlObj.flowMaterialUrl3]} else if (this.ruleForm.form === 11 && type !== 'icon' && type !== 'bg') {// 激励视频this.imgUrlObj.videoMaterialUrl = res.fileNamethis.ruleForm.material = [this.imgUrlObj.videoMaterialUrl]} else if (this.ruleForm.form === 7) {// 插屏this.imgUrlObj.insertMaterialUrl = res.fileNamethis.ruleForm.material = [this.imgUrlObj.insertMaterialUrl]} else if (this.ruleForm.form === 11 && type === 'icon') {// 广告iconthis.imgUrlObj.iconUrl = res.fileNamethis.ruleForm.icon = this.imgUrlObj.iconUrl} else if (this.ruleForm.form === 11 && type === 'bg') {// 背景图this.imgUrlObj.bgUrl = res.fileNamethis.ruleForm.bgUrl = this.imgUrlObj.bgUrl}console.log(this.isSize, 'isSize....3..')})}})console.log(this.imgUrlObj, 1)console.log(this.ruleForm, 2)console.log(this.isSize, 'isSize...2...')},// tab选项卡切换的时候，清空已经上传的图片clearImage() {this.imgUrlObj = {screenMaterialUrl: '',flowMaterialUrl1: '',flowMaterialUrl21: '',flowMaterialUrl22: '',flowMaterialUrl23: '',flowMaterialUrl3: '',videoMaterialUrl: '',insertMaterialUrl: '',}},// 提交表单信息onSubmit() {// 当选择三图一文的时候校验是否为3张图片if (this.ruleForm.form === 10 && this.ruleForm.style === 2) {if (this.ruleForm.material.length !== 3) {return this.$message.warning('信息流素材需要上传3张图片')}}let addApi = '/admin/creative/add'let editApi = '/admin/creative/edit'let params = {...this.ruleForm}this.$request.post(this.isEdit ? editApi : addApi, params).then((res) => {console.log(res, 'res.....')this.$route.query.isEdit === '1' ? this.$message.success('编辑成功') : this.$message.success('新增成功')// 返回列表页this.$router.go(-1)})},// 创意类型发生变化ideaTypeChange(val) {this.clearImage()console.log(val, 'form....')},// 跳转类型发生变化，需要置空下载链接表单skipTypeChange(val) {if (val === 2) {this.ruleForm.url = ''} else {this.ruleForm.downloadUrlAndroid = ''this.ruleForm.downloadUrlIos = ''this.ruleForm.downloadNameAndroid = ''}},// 样式类型发生变化styleTypeChange(val, source) {if (source === 'inspireStyle' && val === 1) {// 改变图片宽高显示this.videoWidth = 1280this.videoHeight = 720} else {this.videoWidth = 720this.videoHeight = 1280}if (source === 'flowStyle') {console.log('flowStyle....')}console.log(val, 'style....')this.ruleForm.style = val// 只要选项卡发生变化，则清空图片this.clearImage()},cancelSubmit() {this.$router.go(-1)},resetForm(formName) {this.$refs[formName].resetFields()}}}</script><style scoped lang="scss">.fa-node {position: relative;.child-node {position: absolute;top: 0;left: 502px;color: #8c939d;}}.avatar-uploader {width: 200px;height: 160px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;.el-upload__text {position: absolute;top: 48px;left: 58px;line-height: 18px;color: #8c939d;}.el-upload__size {position: absolute;top: 75px;left: 40px;line-height: 18px;color: #8c939d;}.el-upload__wh {position: absolute;top: 105px;left: 16px;line-height: 14px;color: #999;}}.avatar-uploader:hover {border-color: #409eff;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 200px;height: 160px;line-height: 50px;text-align: center;}.avatar {width: 200px;height: 160px;display: block;}.idea-container {background: #ffffff;padding: 30px 0;}.form-container {width: 80%;min-width: 460px;max-width: 600px;}.wid40 {width: 40px;}</style>