form表单有关图片上传的部分
<el-form-item label="图片选择" prop="cover">
<p style="font-size: 12px; color: red; padding: 0; margin: 0">
(注意:界面图片,自动上传;任选其一)
</p>
<el-radio v-model="imgChange" label="CHOOSE">选择图片</el-radio>
<el-radio v-model="imgChange" label="UPLOAD">手动上传</el-radio>
<div class="industryBox" v-if="imgChange == 'CHOOSE'">
<div
class="industryItem"
v-for="(item, index) in industryList"
:key="index"
>
<el-radio
v-model="industryName"
:label="item.logo"
style="width: 80px;"
>{{item.name}}</el-radio>
<img
:src="item.logo"
alt=""
style="width: 120px; height: 120px; object-fit: scale-down"
/>
</div>
</div>
<el-upload
v-else
:file-list="selectFileList"
:on-change="onchangeImg"
:show-file-list="true"
:on-remove="handleRemoveImg"
class="editor-slide-upload"
action
:http-request="uploadImg()"
list-type="picture-card"
accept=".jpg,.png,.jpeg,.svg,.ico"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
页面呈现效果
业务需求如下
1.界面图片和手动上传任选其一,界面图片对应参数coverImage,手动上传更改时传cover,未更改coverImage;
2.添加或编辑的时候,需要将图片上传的方式
图片的校验
const validateLogoFile = (rule, value, callback) => {
if(this.imgChange == 'CHOOSE') {
if(this.industryName) {
callback()
}else {
callback(new Error('请选择图片'))
}
}else {
if (!this.selectFileList || this.selectFileList.length <= 0) {
callback(new Error('请上传图片'))
} else {
callback()
}
}
}
rules:{
cover: [
{
required: true,
validator: validateLogoFile,
trigger: 'change',
},
],
}
勾选和手动上传的时候,对于图片的校验
watch:{
//手动上传
'imgChange': {
handler(val) {
this.$refs.ruleForm.clearValidate('cover')
}
},
//勾选
industryName: {
handler(val) {
let index = this.industryList.findIndex(item => {
return item.name == val
})
if (index > -1) {
this.industryImg = this.industryList[index].logo
this.$refs.ruleForm.clearValidate('cover') //清除文字校验
} else {
this.industryImg = ''
}
},
},
}
数据的初始化
initDate(val){
if(res.data.coverUploadWay == 'CHOOSE') {
this.industryName = res.data.coverImage
}else {
this.selectFileList.push({ url: res.data.coverImage })
this.industryNameClone = res.data.coverImage
}
}
点击确认的时候,对数据进行进一步的处理
if (this.CurObject.id) {
if(this.imgChange == 'CHOOSE') {
this.$set(obj,'coverImage',this.industryName)
}else {
if(this.imgFile) {
this.$set(obj,'cover',this.imgFile)
}else {
this.$set(obj,'coverImage',this.industryNameClone)
}
}
this.$set(obj, 'id', this.CurObject.id)
let fd = new FormData()
for (let item in obj) {
fd.append(item, obj[item])
}
putArticle(fd).then(res => {
this.flashParent()
})
} else {
this.$set(obj, this.imgChange == 'CHOOSE' ? 'coverImage' :'cover', this.imgChange == 'CHOOSE' ? this.industryName : this.imgFile)
let fd = new FormData()
for (let item in obj) {
fd.append(item, obj[item])
}
addArticle(fd).then(res => {
this.flashParent()
})
}