上传图片,必填增加校验

复制代码
<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 @   鼓舞飞扬  阅读(89)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
历史上的今天:
2022-01-18 记住滚动条位置
2022-01-18 vant下拉加载更多,上拉刷新
点击右上角即可分享
微信分享提示