2019-12-18 vue 文件上传

组件upload-file.vue文件代码

父组件文件中导入子组件

import uploadFile from './components/upload-file'

在全局中修改样式（element-ui.scss）
/**

• 文件上传样式调整
  */
  .el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 180px;
  height: 125px;
  cursor: pointer;
  line-height: 126px;
  vertical-align: top;
  }
  .el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 180px;
  height: 125px;
  margin: 0 8px 8px 0;
  display: inline-block;
  }

缺点：上传的pdf文件不支持预览 也没有展示
优点：支持多选上传、可预览、可删除
实现效果

image.png

image.png