在Vue项目如何实现上传文件（最简单的方式）【前言】在开发一个项目的过程中，常常会遇到上传文件、上传头像的功能需求，这篇

【前言】在开发一个项目的过程中，常常会遇到上传文件、上传头像的功能需求，这篇文章将总结在vue项目开发过程中，使用elementUI组件库实现上传文件的基本功能。

核心思想

因为button按钮没有上传文件的功能，需借助input标签的 type=file 属性来实现文件上传,利用css的方式让input标签隐藏。

实现思路

给input标签注册一个change事件用来监听文件的选择状态;
给button按钮注册一个点击事件，让文件选择窗口出现。

实现代码

在return数据对象中定义一个变量，通常由后端提供参数名，用来保存选中的文件：

//表单数据对象
pubForm: {
        cover_img: null // 用来保存用户选择的封面图片（null 表示没有选择任何封面）
      },

准备一个选择框和文件上传按钮

<el-form-item label="文章封面">
   <!-- 用来显示封面的图片 -->
   <img src="../../assets/images/cover.jpg" 
        class="cover-img" 
        ref="imgRef" 
        alt="" />
     <br/>
    <!-- 文件选择框，默认被隐藏 -->
    <input type="file"
        style="display: none;"
        accept="image/*"
        ref="iptFileRef"
        @change="onCoverChangeFn"
          />
          <!-- 选择封面的按钮 -->
<el-button type="text" @click="chooseImgFn">+ 选择封面</el-button>
</el-form-item>

实现效果

4. 注册点击事件，点击选择封面让文件选择窗口出现

5. 监听input的change事件，判断是否选择了文件

// 封面选择改变的事件
onCoverChangeFn (e) {
      // 获取用户选择的文件列表
      const files = e.target.files
      if (files.length === 0) {
        // 用户没有选择封面
        this.pubForm.cover_img = null
        this.$refs.imgRef.setAttribute('src', defaultImg)
      } else {
        // 用户选择了封面
        this.pubForm.cover_img = files[0]
        // 把图片文件显示到img标签里
        const url = URL.createObjectURL(files[0])
        this.$refs.imgRef.setAttribute('src', url)
      }
}

实现效果