图片选择/手动上传upload

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()
            })
          }