首页 > 其他分享 >上传图片,必填增加校验

上传图片,必填增加校验

时间:2024-01-18 17:57:15浏览次数:23  
标签:必填 raw imageUrl 校验 item window createObjectURL file 上传

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

 

标签:必填,raw,imageUrl,校验,item,window,createObjectURL,file,上传
From: https://www.cnblogs.com/guwufeiyang/p/17973085

相关文章

  • 上传文件,走action方式(快速)
    1、请求头加tokenconsttoken=localStorage.getItem('token');letaothrization='';if(token){aothrization='Bearer'+JSON.parse(token);this.reqHeader={Authorization:aothrization};}2、html<a-upload......
  • 登录功能-校验token实现
    登录功能-token校验用户是否为登录态1、Redis环境的准备:使用docker拉取Redis镜像·卸载掉已安装的docker,确保yum包更新到最新:[卸载旧版本(如果安装过旧版本的话)]sudoyumremovedockerdocker-commondocker-selinuxdockesr-engine·安装yuminstall-yyum-utilsdevi......
  • 【Django】通用分块上传
    通用分块上传文件importos#通用路径分块上传defpiecemeal_public_load(path,original_md5_hash,chunk_index,upload_file,chunk_total,file_Name):"""path:存放路径(media/后面跟的路径)original_md5_hash:临时文件夹名称chunk_inde......
  • 如何在博客园上传MD格式文件
    如何在博客园上传MD格式文件第一步使用cmd安装pyyaml库pip3installpyyaml#我已经安装过了,显示不一样第二步下载解压pycnbolghttps://github.com/dongfanger/pycnblog第三步打开文件夹中config.yaml文件修改配置blog_url:#这个就是你的博客网址blog_id:""博客......
  • MobaXterm上传下载文件、文件夹到服务器上的操作方法
    首先通过SSH与服务器建立连接,可参考https://www.cnblogs.com/mercury-cheng/p/17969225。1、上传下载文件可以在命令输入窗口,无需输入命令,按ctrl单击的同时鼠标右键出现以下左图,选择receivefileusingZ-modem或者sendfile usingZ-modem来上传或者下载文件。也可以通过mob......
  • LayUI多文件上传,支持历史上传预览
    记录一次项目开发中,LayUI多个图片进行优化,需要支持多个图片上传、可删除某一个图片、支持加载上次上次图片。页面代码:<divclass="layui-upload"><buttontype="button"class="layui-btnlayui-btn-normal"id="ID-upload-demo-files">选择多文件&l......
  • 文件上传超出了tomcat的限制大小:org.apache.tomcat.util.http.fileupload.impl.FileSi
    报错的原因springBoot项目自带的tomcat对上传的文件大小有默认的限制,SpringBoot官方文档中展示:每个文件的配置最大为1Mb,单次请求的文件的总数不能大于10Mb。解决方法SpringBoot2.0版本在【application】配置文件中加入如下代码:#maxFileSize单个数据大小spring.servlet......
  • Gin单文件上传以及多文件上传
    Gin单文件上传以及多文件上传1单文件上传funcmain(){router:=gin.Default()//为multipartforms设置较低的内存限制(默认是32MiB)//router.MaxMultipartMemory=8<<20//8MiBrouter.POST("/upload",func(c*gin.Context){file......
  • Gin 文件上传 按照日期存储
    Gin文件上传按照日期存储1实现步骤/* 1.获取上传的文件 2.获取后缀名判断类型是否正确.jpg.png.gif.jpeg 3.创建图片保存目录static/upload/20240101 4.生成文件名称和文件保存的目录 5.保存*/2代码//获取当前的日期funcGetDay()string{ template:="......
  • Markdown文件上传博客园
    Markdown文件上传博客园冲浪发现了能直接上传markdown文件的脚本,不用自己慢慢复制了,非常好用~所需工具:Typora需要破解版,网上很多。pythonpycnblog(实现md文件上传的脚本):https://github.com/dongfanger/pycnblogTypora的设置:​ 上传笔记肯定会有图片,需要对Typora的相关......