上传图片,必填增加校验

<el-form-item
  label="产品照片:"
  class="product-manual-box"
  :prop="`infoTabs[${index}].productfmId`"
  :rules="{
    required: true,
    message: '请上传产品照片',
    trigger: 'change'
  }"
>
  <el-upload
    class="avatar-uploader"
    action="#"
    :http-request="requestUpload"
    :show-file-list="false"
    accept=".jpg,.jpeg,.png"
    :before-upload="checkFile"
    :on-change="
      file => {
        return getProductPhotosFile(file, item);
      }
    "
  >
    <img
      v-if="item.imageUrl"
      :src="item.imageUrl"
      class="avatar"
    />
    <i
      v-if="!item.imageUrl"
      class="el-icon-plus avatar-uploader-icon"
    ></i>

    <div class="triangle-up" v-if="item.imageUrl">
      <i
        class="el-icon-zoom-in"
        @click.stop="ProductPhotosPreview(item)"
      ></i>
    </div>
  </el-upload>
</el-form-item>

js代码:

getProductPhotosFile(file, item) {
    if (window.createObjectURL != undefined) {
       item.imageUrl = window.createObjectURL(file.raw);
       this.imageUrl = window.createObjectURL(file.raw);
    } else if (window.URL != undefined) {
       item.imageUrl = window.URL.createObjectURL(file.raw);
       this.imageUrl = window.URL.createObjectURL(file.raw);
    } else if (window.webkitURL != undefined) {
       item.imageUrl = window.webkitURL.createObjectURL(file.raw);
       this.imageUrl = window.webkitURL.createObjectURL(file.raw);
    }
    item.productfmId = file.uid;
    if (item.productfmId) {
        this.$refs.searchFormRef.clearValidate(item.productfmId);
    }
}

 

posted @ 2024-01-18 17:50  鼓舞飞扬  阅读(54)  评论(0编辑  收藏  举报