图片批量上传

介绍

该图片上传样式与功能上参考了 QQ空间的相册上传功能；通过 el-dialog 弹窗的形式，展现图片选择模块，用户可批量选择图片，可对图片进行单个或者批量的上传处理。

目录结构

└─ src
   └─ components
      └─ PhotoUpload         # 图片批量上传
         ├─ index.js         # 
         └─ index.vue        # 上传弹窗组件

组件效果图

源码解析

文件上传使用 input type="file" 的形式，input 表单设置 display:none 不在页面中显示，通过文件选择按钮点击事件，触发自定义鼠标事件 MouseEvent，从而能够选择文件。
关于 MouseEvent 使用文档 (opens new window)

<!-- type="file" 表单为文件选择 -->
<!-- multiple 文件多选 -->
<!-- accept 接受文件类型 -->
<input
   type="file"
   name="file"
   multiple
   accept="image/png,image/jpg,image/jpeg,image/gif,image/bmp"
   ref="fileInput"
   class="upload-input"
   @change="fileChangeHandle"
/>

// 选择文件
chosenFileHandle() {
   // 自定义鼠标事件
   let evt = new MouseEvent("click", {
      bubbles: true,
      cancelable: true,
      view: window,
   });

   // 事件派发
   this.$refs.fileInput.dispatchEvent(evt);
},