2019-12-18 vue 文件上传

组件upload-file.vue文件代码
<template>
<div >
<el-upload
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:multiple="true"
accept="image/jpeg,image/gif,image/png, application/pdf"
:file-list="fileList"
:auto-upload="false"
:before-upload="handleBeforeUpload"
:on-change="changeFile">
<div class="el-upload__tip" slot="tip">支持.jpeg/.jpg/.png/.gif/.pdf格式文件</div>
<i slot="default" class="el-icon-plus"><span style="font-size:20px">点击添加</span></i>
<div slot="file" slot-scope="{file}">

<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
style="margin-top:10px"
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
<span style="font-size:12px;">{{file.name}}</span>
</span>

</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body >
<img width="100%" style="padding-top:6px;" fit="contain" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogImageUrl: '',
disabled: false,
dialogVisible: false
}
},
props: {
fileList: {
type: Array,
default: []
}
},
methods: {
beforeRemove(file, fileList) {
return this.notify.warning({
title: '警告',
message: '请上传格式为png, gif, jpg, jpeg的图片或者pdf文件'
})
}
// let size = file.size / 1024 / 1024 / 2
// if(size > 2) {
// this.refs.upload.uploadFiles
const index = fileList.findIndex(fileItem => {
return fileItem.uid === file.uid
})
fileList.splice(index, 1)
this.notify.warning({
title: '警告',
message: '请上传格式为png, gif, jpg, jpeg的图片或者pdf文件'
})
return
}
// if (file) {
// file.disabled = false
// }
// console.log(file, 'lllllllllllllll')
},
handlePictureCardPreview(files) {
const file = files.raw
if (file.type === 'application/pdf') {
this.dialogVisible = false
this.message.error('请上传正确的文件格式！')
}
}
}
}
</script>
<style scoped>
</style>

父组件文件中导入子组件
<uploadFile :fileList="fileList"></uploadFile>

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