使用el-upload 上传图片组件，验证图片是否上传成功的两种方式。

最新推荐文章于 2025-04-14 20:14:43 发布

qq_42797435

最新推荐文章于 2025-04-14 20:14:43 发布

阅读量2.5k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42797435/article/details/127568311

版权

本文介绍使用el-upload组件在Vue.js中验证图片上传成功的方法，包括利用组件自带的上传回调和自定义http-request方式进行校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用el-upload 上传图片组件，验证图片是否上传成功的两种方式

第一种方式

使用el-upload自带的上传方法

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"  //使用action方式上传
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

2. 添加非空校验
        rules: {
          logo: [
            { required: true, message: '请选择图片', trigger: 'change' }
          ],

3.调用上传成功的回调函数，对图片是否上传进行校验,

      handleAvatarSuccess(res, file) {
      //通过这种方式手动验证,这样页面上的必传验证就会消失
        this.form.logo = res.data.filepath;
        this.$refs.form.validateField('logo');
      },

在这里插入图片描述

第二种方式

使用el-upload自定义的:http-request上传方法

  <el-form-item label="图片" prop="logo">
            <el-upload
              class="el-upload"
              :http-request="uploadImg"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.logo" :src="form.logo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

添加非空校验

        rules: {
          logo: [
            { required: true, message: '请选择图片', trigger: 'change' }
          ],

3.调用上传之前的回调函数，对图片是否上传进行校验

  beforeAvatarUpload(file){
   //通过这种方式手动验证,这样页面上的必传验证就会消失
        this.form.logo = file.name;
        this.$refs.form.validateField('logo');
      },

在这里插入图片描述