使用element-plus校验文件上传以及quill-editor必填

安装富文本编辑器 [ vue-quill ]

官网地址https://vueup.github.io/vue-quill/

pnpm add @vueup/vue-quill@latest

注册成局部组件

import { QuillEditor } from ‘@vueup/vue-quill’
import ‘@vueup/vue-quill/dist/vue-quill.snow.css’

页面中使用绑定

<div class="editor">
  <quill-editor
    theme="snow"
    v-model:content="formModel.content"
    contentType="html"
  >
  </quill-editor>
</div>

添加校验规则

const rules = {
  cover_img: [{ required: true, message: '请上传封面', trigger: 'blur' }],
  content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
}

    <el-form :model="formModel" :rules="rules" ref="formRef">
    <el-form-item label="文章封面" prop="cover_img">
        <!--  :auto-upload="false"关闭自动上传
       :on-change="onChangeImg" 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        -->
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="onChangeImg"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <div class="editor">
          <quill-editor
            theme="snow"
            v-model:content="formModel.content"
            content-type="html"
            @blur="onEditVali"
          ></quill-editor>
        </div>
      </el-form-item>
    </el-form>

提交校验

const formModel = ref({
  content: '',
  cover_img: ''
})
const imageUrl = ref('')
const onChangeImg = (uploadFile) => {
  // uploadFile  上传文件对象
  // uploadFile.raw  文件
  // URL.createObjectURL(uploadFile.raw)  创建本地预览的对象,可以作为img src 属性中引用
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
  formModel.value.cover_img = uploadFile.raw
}
const onEditVali = () => {
  if (formModel.value.content === '<p><br></p>') {
    // 清空内容时设置为空字符串
    formModel.value.content = ''
  }
  formRef.value.validateField('content')
}

// 发布文章
const onAddArt = async () => {
  await formRef.value.validate()
}

由于quill-editor编辑器用户输入内容又清空后,会留下<p><br></p> 字段,所以监听失去焦点事件,清空编辑器内容,再重新校验

样式

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader {
  :deep() {
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
  }
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}