PDF文件上传转成base64编码并支持预览_pdf转base64

一、需求分析

在工作中，有个需求：

• 前端上传PDF文件，需要转成base64编码，传给后端。
• 查看的时候，后端返回base64编码，前端实现PDF预览。

目前有个缺点，PDF文件如果大于2M，就预览不成功了。

二、实现方法

1、使用el-upload组件实现上传按钮

<el-upload
      :multiple="false"
      accept=".pdf"
      action="#"
      :http-request="httpRequest"
      :show-file-list="false"
    >
      <el-button size="mini" type="primary">点击上传</el-button>
    </el-upload>
1
2
3
4
5
6
7
8
9

更具体的el-upload方法可以参考官网介绍

2、使用el-table实现上传后的文件列表

<el-table :data="files" style="width: 100%">
      <el-table-column type="index" width="100"> </el-table-column>
      <el-table-column prop="fileName" label="文件名称"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="lookFile(scope.row.fileId)"
            type="text"
            size="small"
            >查看</el-button
          >
          <el-button @click="delFile(scope.index)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、使用el-dialog弹窗实现pdf文件预览

<el-dialog title="文件预览" :visible.sync="dialogVisible" width="1000px">
      <div style="height: 80vh">
        <iframe
          width="100%"
          height="100%"
          :src="`data:application/pdf;base64, ${file}`"
        ></iframe>
      </div>
    </el-dialog>
1
2
3
4
5
6
7
8
9

4、定义的data数据

<script>
export default {
  data() {
    return {
      dialogVisible: false, //预览弹窗
      file: "", //预览文件
      files: [], //已上传的文件列表
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11

5、覆盖默认的上传行为，自定义上传

httpRequest(data) {
      // 调用转方法base64
      this.getBase64(data.file)
        .then((resBase64) => {
          console.log(resBase64)
          //获取文件，不带data:application/pdf;base64, 前缀
          this.file = resBase64.split(",")[1];
          //获取文件名称
          this.fileName = data.file.name;
          this.files.push({
              fileId: 1,
              fileName: this.fileName,
              file:this.file
            });
          //调用上传接口，这里暂时不调用
          // this.upload();
        })
        .catch((err) => {
          console.log(err);
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

6、转base64码方法

    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file);
        // 开始转码
        reader.onload = () => {
          fileResult = reader.result;
        };
        // 转码失败
        reader.onerror = (error) => {
          reject(error);
        };
        // 转码结束
        reader.onloadend = () => {
          resolve(fileResult);
        };
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7、点击预览方法

这里只是模拟，后面需要调用后端接口获取数据

//预览
    lookFile(fileId) {
      let that = this;
      that.file = fileId.file;
      that.dialogVisible = true;
    },
1
2
3
4
5
6

8、调用接口上传文件

    upload() {
      let that = this;
      let { file, fileName } = that;
      //这里调用后端接口，根据自己项目修改，传递参数为base64文件，及文件名称
      this.$api
        .upload({ file, fileName })
        .then((res) => {
          if (res.data.code == 200) {
            let result = res.data.data;
            //这里是接口返回fileId，fileName，然后添加到文件列表数组里
            that.files.push({
              fileId: result.fileId,
              fileName: result.fileName,
            });
            that.$message.success("文件上传成功");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

三、全部代码

具体实现代码如下：

<template>
  <div>
    <!-- 选择文件 -->
    <el-upload
      :multiple="false"
      accept=".pdf"
      action="#"
      :http-request="httpRequest"
      :show-file-list="false"
    >
      <el-button size="mini" type="primary">点击上传</el-button>
    </el-upload>

    <!-- 文件列表 -->
    <el-table :data="files" style="width: 100%">
      <el-table-column type="index" width="100"> </el-table-column>
      <el-table-column prop="fileName" label="文件名称"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="lookFile(scope.row.fileId)"
            type="text"
            size="small"
            >查看</el-button
          >
          <el-button @click="delFile(scope.index)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 文件预览 -->
    <el-dialog title="文件预览" :visible.sync="dialogVisible" width="1000px">
      <div style="height: 80vh">
        <iframe
          width="100%"
          height="100%"
          :src="`data:application/pdf;base64, ${file}`"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, //预览弹窗
      file: "", //预览文件
      files: [], //已上传的文件列表
    };
  },
  methods: {
    //删除
    delFile(index) {
      this.files.splice(index, 1);
    },

    //预览
    lookFile(fileId) {
      let that = this;
      //这里调用后端接口，根据自己项目修改，传递参数为fileId
      this.$api
        .getFile({ fileId })
        .then((res) => {
          if (res.data.code == 200) {
            //这里是接口返回的文件base64，不带data:application/pdf;base64, 前缀
            that.file = res.data.data;
            that.dialogVisible = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //覆盖默认的上传行为，可以自定义上传的实现
    httpRequest(data) {
      // 调用转方法base64
      this.getBase64(data.file)
        .then((resBase64) => {
          //获取文件，不带data:application/pdf;base64, 前缀
          this.file = resBase64.split(",")[1];
          //获取文件名称
          this.fileName = data.file.name;
          //调用上传接口
          that.upload();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //调用接口上传文件
    upload() {
      let that = this;
      let { file, fileName } = that;
      //这里调用后端接口，根据自己项目修改，传递参数为base64文件，及文件名称
      this.$api
        .upload({ file, fileName })
        .then((res) => {
          if (res.data.code == 200) {
            let result = res.data.data;
            //这里是接口返回fileId，fileName，然后添加到文件列表数组里
            that.files.push({
              fileId: result.fileId,
              fileName: result.fileName,
            });
            that.$message.success("文件上传成功");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 转base64码
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file);
        // 开始转码
        reader.onload = () => {
          fileResult = reader.result;
        };
        // 转码失败
        reader.onerror = (error) => {
          reject(error);
        };
        // 转码结束
        reader.onloadend = () => {
          resolve(fileResult);
        };
      });
    },
  },
};
</script>

<style scoped>
iframe {
  border: 0 none;
}
::v-deep .el-dialoog__body {
  padding: 8px !important;
  box-sizing: border-box;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

四、效果展示