vue【1-0】el-upload 上传头像预览（直接使用官网上传方法）

最新推荐文章于 2025-06-24 09:24:22 发布

单个循环

最新推荐文章于 2025-06-24 09:24:22 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue el-upload 预览上传图片

本文链接：https://blog.youkuaiyun.com/Tai4lin/article/details/96591794

本文介绍了如何在Vue项目中使用el-upload组件实现头像上传并预览的功能。首先，通过限制上传文件格式和大小，然后利用beforeAvatarUpload方法进行文件校验。接着，通过嵌套dialog实现上传前的预览。在用户选择文件后，先不立即上传，而是等待用户确认后再提交。最后，讨论了在关闭或取消操作时清空上传列表的方法，并指出在实际项目中可能需要自定义上传接口以满足特定需求。

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

功能要求

点击修改头像，弹出上传框
选择文件上传后弹出校验框
因头像为一张，确认、取消、关闭窗口需清空列表

效果展示

要点：

0、拖拽上传upload自定义

1、嵌套dialog自定义

0、upload自定义

/// 官网代码————el-upload

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

修改如下：

0.1 限制上传的文件格式：

accept=".jpg,.jpeg,.png,.JPG,.JPEG"

0.2 图片大小限制：绑定beforeAvatarUpload方法，如下，也可在里面写文件格式的判断，搜一下就有了

0.3 图片预览——这里粗糙的用on-success，即上传后再显示，可以自己改用on-change，再submit，具体参见下篇，1.3同解释

el-upload代码：

<template>
                      <!-- drag upload -->
                      <el-upload
                        class="upload-demo"
                        ref="upload"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                        :multiple="false"
                        list-type="picture"
                        :before-upload="beforeAvatarUpload"
                        :on-success="handleAvatarSuccess"
                      >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                      </el-upload>
</template>

<script>
export default {
  name: 'Personal',
  data () {
    return {
      // 个人中心-用户资料修改
      ruleFormPersonalInfo: { // 用户资料表单
        name: this.$store.state.name,
        info: this.$store.state.info,
        url: this.$store.state.image
      },