問題：處理后得到的是images的數(shù)組，有幾張就有幾個數(shù)組 當(dāng)時想拿images[0]作為封面，結(jié)果 base64地址用到upload的img中會被其中base64，的逗號分隔取前面的，例如到img就只有前半截

image.png

解決：要用數(shù)組[images[0]]

tip將pdf轉(zhuǎn)圖片

// npm i pdfjs-dist --save
//引入pdfjs庫

// {/* import pdfjsLib from 'pdfjs-dist' */}
  // < script src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.min.js"
  // integrity = "sha512-KEoL9wKXt/fhlAfN+ZNXf3pI48aaQE9Qd5fihHY+5n5XLTSnyGJ0uKgUj//V6KAcjFwzAbCYYPKeGlFES/H5Ng=="
  // crossorigin = "anonymous"
  // referrerpolicy = "no-referrer" > < /script>

//加載pdf文件
const loadPdf = async (url) => {
  const loadingTask = pdfjsLib.getDocument(url)
  const pdf = await loadingTask.promise
  return pdf
}
//將pdf頁面轉(zhuǎn)換為canvas
const pdfToCanvas = async (pdf, pageIndex) => {
  const page = await pdf.getPage(pageIndex)
  const canvas = document.createElement('canvas')
  const viewport = page.getViewport({
    scale: 1
  })
  canvas.width = viewport.width
  canvas.height = viewport.height
  const context = canvas.getContext('2d')
  const renderContext = {
    canvasContext: context,
    viewport,
  }
  await page.render(renderContext).promise
  return canvas
}
//將canvas轉(zhuǎn)換為圖像
const canvasToImage = async (canvas) => {
  const dataUrl = canvas.toDataURL('image/jpeg')
  return dataUrl
}
//將pdf文件轉(zhuǎn)換為多頁圖像
const pdfToImages = async (url) => {
  const pdf = await loadPdf(url)
  const images = []
  for (let i = 1; i <= pdf.numPages; i++) {
    const canvas = await pdfToCanvas(pdf, i)
    const image = await canvasToImage(canvas)
    images.push(image)
  }
  return images
}
//下載圖像
const downloadImage = (url, name) => {
  const link = document.createElement('a')
  link.download = name
  link.href = url
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// dataurl 為傳進(jìn)來的base64格式的圖片地址， return 返回的為file格式
const base64ImgtoFile=(dataurl, filename = 'file')=>{
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
}
//使用示例
// const url = 'https://example.com/example.pdf'
// const images = await pdfToImages(url)
// for (let i = 0; i < images.length; i++) {
//   downloadImage(images[i], `page${i+1}.jpg`)
// }
export {
  pdfToImages,
  downloadImage,
  base64ImgtoFile
}

二、將生成的base64轉(zhuǎn)file上傳取地址在顯示保存

將base64轉(zhuǎn)file

// dataurl 為傳進(jìn)來的base64格式的圖片地址， return 返回的為file格式
const base64ImgtoFile=(dataurl, filename = 'file')=>{
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
}

將file上傳

export const uploadFile = (file) => {
  const formData = new FormData();
  formData.append('file', file);
  return request({
    headers: {
      "Content-Type": "multipart/form-data"
    },
    url: '/fileUpload/blade-resource/oss/endpoint/put-file-attach',
    method: 'post',
    data: formData
  })
}

在顯示

async uploadAfter(res, done) {
        try{
          const images = await pdfToImages(res.link)
          var file = base64ImgtoFile(images[0])
          uploadFile(file).then(res=>{
            this.form.coverImg = res.data.data.name
          })
          done()
        }catch (e) {
          console.error(e)
          done()
        }
        // this.$message.success('上傳后的方法')
      },