elementui表单验证图片上传为必填

一个打工仔的笔记

已于 2024-01-03 10:31:19 修改

阅读量1.3k

点赞数 9

文章标签： elementui 前端 javascript

于 2024-01-03 10:30:24 首次发布

本文链接：https://blog.csdn.net/Web_Notes/article/details/135356922

版权

本文介绍了如何在Vue项目中使用ElementUI的el-upload组件进行图片上传，并配合自定义验证函数fileMustUpload，确保图片字段非空。

摘要由CSDN通过智能技术生成

1.form表单上传自己看着写

 <el-form ref="formOut" :model="formData" :rules="formRules" label-width="120px">
     <el-form-item label="图标" prop="img">
       <div style="display: flex">
         <el-upload class="upload-demo" :action="url + '/file/put-file'" :on-success="(res) => {onSuccess(res, 'formData');}" :limit="1" :file-list="fileList" :show-file-list="false" ref="uploadImg1">
           <div v-if="formData.img">
             <img :src="formData.img" alt="" style="width: 50px; height: 50px" />
             <i class="el-icon-delete iconClass_del" @click.stop="delPic('formData')"></i>
           </div>
           <el-button v-else size="small" type="primary">点击上传</el-button>
         </el-upload>
       </div>
     </el-form-item>
 </el-form>

2.rules验证规则

 formRules: {
     img: [
       {
            required: true,
            validator: this.fileMustUpload,
            trigger: "change",
        },
      ],
 }

3.自定义验证方法

    fileMustUpload(rule, value, callback) {
      if (this.formData.img == null) {
        // 未上传文件
        callback("请上传图标");
      }
      callback();//不要忘记写这个callback
    },