0

我有一个页面,用户可以在其中上传几个 pdf 文件。我想在每次添加文件时向用户预览它们。我用 vue-pdf 打印 pdf,例如:

<template>
<div>
<div>
<-- some input to upload files -->
</div>
<pdf
  v-for="i in files[indexFile].pageCount"
   :key="i"
   :src="files[indexFile].data"
   :page="i"
/>
</div>
</template>
<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data () {
    return {
     files: [],
     indexFile: 0
    }
    methods: {
     onFileChanged (e) { // triggered each time client upload a file
       const files = e.target.files

       for(file in files) {
        this.files[indexFile].data = URL.createObjectURL(file)

        const loadingTask = pdf.createLoadingTask(URL.createObjectURL(file))
        loadingTask.promise.then((pdf) => {
        this.files[indexFile].pageCount = pdf.numPages
        }, (resolve) => {
        setTimeout(() => resolve('done!'), 1000)
        })

        this.indexFile++
       }
        
     }
    }
  }
</script>

因此,这段代码应该在用户每次上传一个或多个文件时预览一个或多个文件,他们可以这样做一次或多次。我的问题是第一个文件的 pageCount 没问题,然后对于下一个文件,加载任务似乎没有做任何事情,所以 pageCout 是未定义的。但是如果我添加另一个文件,它将具有正确的 pageCount。所以 pageCount 每两个文件都是未定义的,我不明白为什么

4

0 回答 0