vue实现pdfdoc转图片上传oss完整流程

1. 安装相关依赖

首先需要安装相关依赖，包括vue、vue-pdf、docx-to-pdf、pdf2pic、ali-oss等。

npm install vue vue-pdf docx-to-pdf pdf2pic ali-oss

2. 实现PDF转图片功能

使用vue-pdf和pdf2pic库来实现PDF转图片功能，具体代码如下：

<template>
  <div>
    <vue-pdf :src="pdfFile"></vue-pdf>
    <div v-for="(image, index) in images" :key="index">
      <img :src="image" />
    </div>
    <button @click="convertPDFtoImages">Convert PDF to Images</button>
  </div>
</template>

<script>
import { pdf2pic } from "pdf2pic";
import VuePDF from "vue-pdf";

export default {
  components: {
    VuePDF,
  },
  data() {
    return {
      pdfFile: "path/to/pdf/file.pdf",
      images: [],
    };
  },
  methods: {
    async convertPDFtoImages() {
      const converter = new pdf2pic({
        density: 100,
        savename: "page",
        savedir: "./",
        format: "png",
        size: "600x600",
      });

      const pages = await converter.convertBulk(this.pdfFile, -1);

      this.images = pages.map((page) => `path/to/image/${page}`);
    },
  },
};
</script>

3. 实现DOC转PDF功能

使用docx-to-pdf库来实现DOC转PDF功能，具体代码如下：

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button @click="convertDocToPDF">Convert DOC to PDF</button>
  </div>
</template>

<script>
import docxToPdf from "docx-to-pdf";

export default {
  data() {
    return {
      docFile: null,
      pdfFile: null,
    };
  },
  methods: {
    onFileChange(event) {
      this.docFile = event.target.files[0];
    },
    async convertDocToPDF() {
      const converter = new docxToPdf();

      const pdfBuffer = await converter.convertToBuffer(this.docFile);

      this.pdfFile = new Blob([pdfBuffer], { type: "application/pdf" });
    },
  },
};
</script>

4. 实现上传至阿里云OSS功能

使用ali-oss库来实现上传至阿里云OSS功能，具体代码如下：

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button @click="uploadFile">Upload File</button>
  </div>
</template>

<script>
import OSS from "ali-oss";

export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      const client = new OSS({
        region: "oss-cn-hangzhou",
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        bucket: "yourBucketName",
      });

      const result = await client.put("path/to/file", this.file);

      console.log(result);
    },
  },
};
</script>

5. 整合所有功能

最后，将以上三个功能整合在一起，即可实现完整的PDF、DOC转图片并上传至阿里云OSS的流程。

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <vue-pdf :src="pdfFile"></vue-pdf>
    <div v-for="(image, index) in images" :key="index">
      <img :src="image" />
    </div>
    <button @click="convertFile">Convert and Upload</button>
  </div>
</template>

<script>
import { pdf2pic } from "pdf2pic";
import docxToPdf from "docx-to-pdf";
import OSS from "ali-oss";
import VuePDF from "vue-pdf";

export default {
  components: {
    VuePDF,
  },
  data() {
    return {
      file: null,
      pdfFile: null,
      images: [],
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    async convertFile() {
      if (this.file.type === "application/pdf") {
        await this.convertPDFtoImages();
      } else if (
        this.file.type ===
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      ) {
        await this.convertDocToPDF();
        await this.convertPDFtoImages();
      }

      await this.uploadImages();
    },
    async convertPDFtoImages() {
      this.pdfFile = URL.createObjectURL(this.file);

      const converter = new pdf2pic({
        density: 100,
        savename: "page",
        savedir: "./",
        format: "png",
        size: "600x600",
      });

      const pages = await converter.convertBulk(this.file, -1);

      this.images = pages.map((page) => `path/to/image/${page}`);
    },
    async convertDocToPDF() {
      const converter = new docxToPdf();

      const pdfBuffer = await converter.convertToBuffer(this.file);

      this.file = new Blob([pdfBuffer], { type: "application/pdf" });
    },
    async uploadImages() {
      const client = new OSS({
        region: "oss-cn-hangzhou",
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        bucket: "yourBucketName",
      });

      for (let i = 0; i < this.images.length; i++) {
        const result = await client.put(`path/to/image/${i}.png`, this.images[i]);

        console.log(result);
      }
    },
  },
};
</script>