<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>
  <el-dialog :visible.sync="dialogVisibles" >
    <pdf style="width:630px;padding-top:6px" :src="fileUrl"></pdf>
    <!-- <iframe :src="fileUrl" frameborder="0" style="width: 100%; height: 100%"></iframe> -->
  </el-dialog>
</div>

</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
dialogImageUrl: '',
fileUrl: '',
disabled: false,
dialogVisibles: 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.dialogVisibles = true
// this.fileUrl = pdf.createLoadingTask('http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf')
this.fileUrl = pdf.createLoadingTask(files.url)
// window.open(this.fileUrl)
// this.dialogVisible = false
// this.message.error('请上传正确的文件格式！')
}
}
}
}
</script>
<style scoped>
.canvas {
/* display: inline-block; /
/ width: 100%; */
width: 625px;
height: 883px;
}
</style>

需要先执行npm install --save vue-pdf
yarn install