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

一、前言

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

二、上传按钮

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

html代码:

                          

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

  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的走马灯来实现图片的预览,还有如何实现文件下载与删除功能,谢谢!

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

你可能感兴趣的:(前端)