基于ElementUI的一个文件批量上传，下载，删除以及图片预览组件（样式篇）

一、前言

    领导们的心总是难以猜测，这不，他们对于elementUI的上传组件有意见，说不能真正达到批量上传（也确实，因为elementUI的上传组件虽说可以多文件上传，但是它实际上是上传一个文件就建立一条连接，实质上还是单文件一个个上传），所以最终还是要重新做一个上传组件，那么，这一篇先讲解最简单的样式篇吧。

二、上传按钮

    众所周知，如果我们直接写<input type="file"/>，这样的原样式可以说是非常难看了。经过我多次查阅资料而得，有一种兼容性最好而且最实际的方式来修改这个上传组件的原样式，那就是用label标签！之后对label标签的样式修改就相当于对input标签的样式修改。代码如下：

html代码：

<div class="btns">
      <!-- elementUI的下载图标 -->
    <i class="el-icon-upload"></i>
      <!-- label的for属性值一定要是input的id值，这样修改label样式才能对input起作用 -->
    <label class="upload-btn" :for="fileId">上传文件</label>
      <!-- 注意：这里有个坑，input的id一定不能写死，否则你在多个页面使用的话会引起冲突 -->
    <input 
        :id="fileId"
        type="file" 
        ref="input" 
        :name="files" 
        multiple="multiple" 
        style="position:absolute;clip:rect(0 0 0 0);" 
        >
</div>

这里有几个地方需要注意的：

1. label的for属性值一定要是input的id值（两个值一定要相同)，这样接下来的对label的样式修改才会显现在input中，否则无论怎么改label的样式，都不会改变在input的样式中。
2. input的name属性值是传给后台人员的一个参数，所以要和后台商量好用什么，multiple="multiple"表示可以多个文件上传，如果不加的话每次只能传一个文件
3. input的id不能写死，否则如果在同一个页面调用多次这个上传组件，会产生冲突，可能调用的方法就不是你想调用的方法！那么我是这样解决的，把input的id这个属性暴露出去，父组件调用该上传组件时可以传一个id值也可以不传，不传的话将会执行gengerateID ()方法随机生成一个唯一的id，并赋值给fileId,代码如下：

js代码

export default {
    data () {
      return {
        /* fileId是input的id值 */
        fileId: ''
      };
    },
    props: { 
     // 如果父组件有传入id值，则接收并在mounted中赋值给fileId
      id: '',
     // input的name属性值，传给后台的参数
      files: ''，
     // 是否允许多文件上传，默认true
      multiple: true
    },
    mounted () {
      // 给每个input生成一个id
      this.fileId = this.id || this.gengerateID();
    },
    methods: {
      // 指定input type为file的id
      gengerateID () {
        let nonstr = Math.random().toString(36).substring(3, 8);
        if (!document.getElementById(nonstr)) {
          return nonstr;
        } else {
          return this.gengerateID();
        }
      }
    }
};

    经过一番折腾，把一个上传按钮的初稿弄出来了，接下来就是要改一下它的样式，代码如下：

    css代码：

.btns {
  position: relative;
  /* 上传图标 */
  .el-icon-upload {
     position: absolute;
     top: 15px;
     left: 11px;
     font-size: 16px;
     color: white;
   }
 /* label即上传按钮的样式，将会作用在input样式上 */ 
   .upload-btn {
     width: 85px;
     height: 20px;
     text-align: right;
     display: inline-block;
     line-height: 20px;
     color: white;
     padding: 10px;
     cursor: pointer;
     border: 1px solid dodgerblue;
     border-radius: 5px;
     background: dodgerblue;
   }
}

三、总结

    至此，上传按钮的样式篇就说完了，那么我们接下来的几篇文章将会说说如何使用formData进行文件上传，如何使用elementUI的走马灯来实现图片的预览，还有如何实现文件下载与删除功能，谢谢！

     如果有需要改善的地方希望各位能加以指出，或者有什么其他问题，可以在评论区留言噢~