需求:想在上传的时候预览一下pdf,而不是上传完成后预览,emmmmm,好吧 既然提出来了,那就想想怎么实现
思路:上传文件的时候拦截==>获取文件==>进行展示==>提交,说干就干!!!
xxx,js
// 文件上传 file
export function uploadCheckReport(params) {
return request({
url: '/api/xxx/xxx',
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data; charset=utf-8' },
})
}
复制代码
xxx.vue
<el-upload
drag
multiple
:auto-upload="true"
:file-list="report.fileList"
action="#"
style="display: flex; justify-content: center; align-items: center; flex-direction: column"
:before-upload="beforeUpload"
:on-remove="onRemove"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">可上传img/pdf文件</div>
</el-upload>
<div v-if="report.fileData" style="display: flex; justify-content: center; align-items: center; padding: 20px 0">
<el-button type="primary" @click="viewFile">预览</el-button>
<el-button v-loading.fullscreen.lock="fullscreenLoading" style="margin-left: 10px" type="primary" @click="submitUpload">提交</el-button>
</div>
//使用这里可以在页面中某个地方预览pdf
//<object :data="fileData" type="application/pdf" width="100%" height="100%" internalinstanceid="5"></object>
import { uploadCheckReport} from '@/api/xxx.js'
export default {
name: 'xxx',
data() {
report: {
fileData: '',
file: '',
fileName: '',
fileSize: '',
fileList: [],
},
fullscreenLoading:false,
},
methods:{
//1.上次之前拦截文件
beforeUpload(file) {
this.report.file = file
this.report.fileName = file.name
this.report.fileSize = file.size
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
this.report.fileData = reader.result
this.report.fileList = [
{
name: file.name,
url: reader.result,
},
]
}
return false // 返回false不会自动上传
},
//移除文件列表,清除点击预览时的文件
onRemove() {
this.report.fileData = ''
},
// 预览文件
viewFile() {
let win = window.open()
win.document.write(
'<body style="margin:0px;"><object data="' +
this.report.fileData +
'" type="application/pdf" width="100%" height="100%"><iframe src="' +
this.report.fileData +
'" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>',
)
},
// 提交上传的文件
submitUpload() {
this.fullscreenLoading = true
const flieType = this.report.fileName.split('.')[1].toString()
if (['pdf', 'png', 'jpg', 'webp'].includes(flieType)) {
let fileFormData = new FormData()
fileFormData.append('file', this.report.file)
fileFormData.append('taskId', this.uploadTaskId)
uploadCheckReport(fileFormData)
.then((res) => {
this.fullscreenLoading = false
this.upload.dialogVisible = false
this.$message({ type: 'success', message: '上传成功' })
})
.catch((err) => {
this.upload.dialogVisible = false
})
} else {
this.$notify.warning({ title: '上传失败', message: '只能上传图片格式和.pdf文件' })
}
},
}
}
复制代码
\