uniapp不同平台获取文件内容以及base64编码特征_小程序 uni-file-picker 获取base64

作者：Monodyee | 2024-04-04 17:34:24

踩

小程序 uni-file-picker 获取base64

前言

文件图片上传，客户端预览是很正常的需求，获取文件的md5特征码也是很正常的，那么，在uniapp中三种环境，h5, 小程序以及 app环境下，如何实现的？
参考：
如何在uniapp中读取文件ArrayBuffer和sha256哈希值，支持H5、APP、小程序

uniapp 没有提供跨平台的 API 来获取文件的 sha256 哈希值和读取文件的 ArrayBuffer，因此需要开发者自己手动兼容各个平台。在小程序端使用FileSystemManager、app 端是plus.io、H5 端是FileReader，这些 API 都是平台特有的，而且实际调用存在各种问题，也缺乏相关教程

uniapp-微信小程序-图片转base64

ps:只适合小文件上传，大文件的话不要用这个。计算md5的时候采用了sparkMD5，请自行安装。

具体实现

必须要知道的是文件的临时路径，就是：
http://xxxxx 形式的

例如：

// 读取图像文件
uni.chooseImage({
  count: 9,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: (res) => {
    const tempFilePaths = res.tempFilePaths
    // tempFilePaths 是一个数组，可以通过索引获取图片路径，比如tempFilePaths[0]，我们需要的就是这个路径
  },
})
1
2
3
4
5
6
7
8
9
10

或者

	uni.chooseMedia({
		count:1,// 限制选取图像数量
		mediaType:["image"],// 设置选取资源为图片类型
		sourceType:["album","camera"],// 设置图像来源：相册或相机
		camera:"back",// 设置相机为后置摄像头
		success:(res)=>{
			// 获取微信拿到的图片的临时地址并保存到本地
			this.photoPath=res.tempFiles[0].tempFilePath;
			
		}
	})
},
1
2
3
4
5
6
7
8
9
10
11
12

小程序获取 ArrayBuffer以及读取base64:

arrayBuffer:
// 小程序，filePath 是一个本地文件路径
const fs = uni.getFileSystemManager()
return fs.readFileSync(filePath)
base64:
// （由于uniapp开发所以uni打头）
uni.getFileSystemManager().readFile({// 【重点来啦】人家自提供的转码API
	filePath:image.path,// 所需转码图像路径
	encoding:"base64",// 转码类型
	success:(res)=>{
	    // 生成base64
	    let imageBase64='data:image/'+image.type+';base64,'+res.data;
	    console.log('转base64后：',imageBase64);
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

H5获取 ArrayBuffer以及读取base64:

const blobURLToBlob = (url) => {
  return new Promise((resolve, reject) => {
    var http = new XMLHttpRequest()
    http.open('GET', url, true)
    http.responseType = 'blob'
    http.onload = function (e) {
      if (this.status == 200 || this.status === 0) {
        resolve(this.response)
      } else {
        reject(this.status)
      }
    }
    http.send()
  })
}

//  通过blob:url读取实际的ArrayBuffer数据
const H5ReadBlobUrlArrayBuffer = (blobUrl) => {
  return new Promise(async (resolve, reject) => {
    try {
      const reader = new FileReader()
      // blob数据转file对象数据
      const fileBlob: any = await blobURLToBlob(blobUrl)
      const file = new window.File([fileBlob], 'file.name', { type: 'file.type' })
      // 读取file对象ArrayBuffer
      reader.readAsArrayBuffer(file)
      reader.onload = function (e) {
        resolve(e?.target?.result)
      }
    } catch (e) {
      reject(e)
    }
  })
}
//  通过blob:url读取实际的base64:
const H5ReadBlobUrlBase64 = (blobUrl) => {
  return new Promise(async (resolve, reject) => {
    try {
      const reader = new FileReader()
      // blob数据转file对象数据
      const fileBlob: any = await blobURLToBlob(blobUrl)
      const file = new window.File([fileBlob], 'file.name', { type: 'file.type' })
      // 读取file对象ArrayBuffer
      reader.readAsDataURL(file)
      reader.onload = function (e) {
        resolve(e?.target?.result)
      }
    } catch (e) {
      reject(e)
    }
  })
}

注意：实际上 h5都是使用fileReader的api来读取的，arrayBuffer是：readAsArrayBuffer，而base64是readAsDataURL，不但图片，文件也能这样读取base64的。


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

APP获取 ArrayBuffer以及读取base64:

const H5PlusReadFileArrayBuffer = (filePath) => {
  return new Promise((resolve, reject) => {
    try {
      plus.io.resolveLocalFileSystemURL(
        filePath,
        function (entry) {
          entry?.file(function (file) {
            const fileReader = new plus.io.FileReader()
            fileReader.readAsDataURL(file, 'utf-8')
            fileReader.onloadend = function (evt) {
              const result = {
                base64: evt.target.result.split(',')[1],
                size: file.size,
              }
              resolve(uni.base64ToArrayBuffer(result.base64))
            }
          })
        },
        function (error) {
          reject(error)
        },
      )
    } catch (error) {
      reject(error)
    }
  })
}
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

app方面是直接先读取base64，再读取arrayBuffer，所以一气呵成。

综合：

import  SparkMD5 from 'spark-md5';
export interface FileReaderInfo {
    fileHeader64:string;//--base64形式的文件前一段内容，用于传递magicNumber进行判断。
    base64:string;
    arrayBuffer:any;
    tempPath:string;//形式如下：blob:http://localhost:3000/5fd140d3-1372-4394-8b08-0cba8c508099
    mime:string;
    errMsg?:string;
    md5:string,//--获取文件md5.
}

// #ifdef H5
// 通过blob:url读取实际的blob数据
function  h5_blobURLToBlob  (url:string) :Promise<any> {
    return new Promise((resolve, reject) => {
        var http = new XMLHttpRequest();
        http.open('GET', url, true)
        http.responseType = 'blob';
        http.onload = function (e) {
            if (this.status == 200 || this.status === 0) {
                resolve(this.response)
            } else {
                reject(this.status)
            }
        };
        http.send()
    })
}

//  通过blob:url读取实际的ArrayBuffer数据
 function H5ReadBlobUrl(blobUrl:string,mimeType:string): Promise<FileReaderInfo> {

     let intervalInst:any=null;
     const fileinfo:FileReaderInfo={
         fileHeader64:"",
         tempPath:blobUrl,
         arrayBuffer:null,
         base64:"",
         mime:mimeType,
         md5:"",
     };

     return new Promise<FileReaderInfo>(async (resolve, reject) => {

        try {
            const reader = new FileReader();
            const reader64 = new FileReader();
            // blob数据转file对象数据
            const fileBlob: any = await h5_blobURLToBlob(blobUrl);
            const file = new window.File([fileBlob], 'file.name', { type: mimeType });
            // 读取file对象ArrayBuffer
            reader.readAsArrayBuffer(file);
            reader64.readAsDataURL(file);
            reader.onload = function (e) {

                const data:any=e?.target?.result;
                // let spark = new SparkMD5(); // 创建md5对象（基于SparkMD5）
                let spark = new SparkMD5.ArrayBuffer();
                spark.append(data);
                fileinfo.md5=spark.end();
                fileinfo.arrayBuffer=data;
            };
            reader64.onload = function (e) {
                fileinfo.base64=(e?.target?.result+"");
                let subPosIdx = (fileinfo.base64 + "").indexOf(",");
                let headerContent = fileinfo.base64.substr(subPosIdx + 1, 160);
                fileinfo.fileHeader64=headerContent;
            };
            intervalInst=setInterval(()=>{
                if(fileinfo.base64&&fileinfo.arrayBuffer){
                    clearInterval(intervalInst);
                    resolve(fileinfo);
                }
            },100);
        } catch (e) {
            if(intervalInst){
                clearInterval(intervalInst);
            }
            reject(e)
        }
    })
}
// #endif

// #ifdef APP-PLUS
// 通过plus.io读取文件的ArrayBuffer数据
function H5PlusReadFile  (filePath:string,mimeType:string) :Promise<FileReaderInfo> {
    const fileinfo:FileReaderInfo={
        fileHeader64:"",
        tempPath:filePath,
        arrayBuffer:null,
        base64:"",
        mime:mimeType,
        md5:"",
    };
    return new Promise<FileReaderInfo>((resolve, reject) => {
        try {
            plus.io.resolveLocalFileSystemURL(
                filePath,
                function (entry:any) {
                    entry?.file(function (file:any) {
                        const fileReader = new plus.io.FileReader();
                        fileReader.readAsDataURL(file, 'utf-8');
                        fileReader.onloadend = function (evt:any) {
                            fileinfo.base64=(evt?.target?.result+"");
                            let subPosIdx = (fileinfo.base64 + "").indexOf(",");
                            let headerContent = fileinfo.base64.substr(subPosIdx + 1, 160);
                            fileinfo.fileHeader64=headerContent;
                            const result = {
                                base64: evt.target.result.split(',')[1],
                                size: file.size,
                            };
                            const data:any=uni.base64ToArrayBuffer(result.base64);
                            // let spark = new SparkMD5(); // 创建md5对象（基于SparkMD5）
                            let spark = new SparkMD5.ArrayBuffer();
                            spark.append(data);
                            fileinfo.md5=spark.end();
                            fileinfo.arrayBuffer=data;
                            resolve(fileinfo);
                        }
                    })
                },
                function (error) {
                    reject(error)
                },
            )
        } catch (error) {
            reject(error)
        }
    })
}
// #endif

function MpReadFile(filePath:string,mimeType:string) :Promise<FileReaderInfo>{
    const fileinfo:FileReaderInfo={
        fileHeader64:"",
        tempPath:filePath,
        arrayBuffer:null,
        base64:"",
        mime:mimeType,
        md5:"",
    };
    return new Promise<FileReaderInfo>((resolve, reject) => {
        if (uni.canIUse('getFileSystemManager') && uni.getFileSystemManager) {

        }else{
            fileinfo.errMsg="无效环境，不可调用api!";
            reject(fileinfo);
            return ;
        }
        const fs = uni.getFileSystemManager();
        const data:any = fs.readFileSync(filePath);
        // let spark = new SparkMD5(); // 创建md5对象（基于SparkMD5）
        let spark = new SparkMD5.ArrayBuffer();
        spark.append(data);
        fileinfo.md5=spark.end();
        fileinfo.arrayBuffer=data;
        fs.readFile({// 【重点来啦】人家自提供的转码API
            filePath: filePath,// 所需转码图像路径
            encoding: "base64",// 转码类型
            success: (res) => {
                // 生成base64
                // let imageBase64 = 'data:image/' + image.type + ';base64,' + res.data;
                let imageBase64 = res.data;
                console.log('转base64后：', imageBase64);
                fileinfo.base64=(imageBase64+"");
                let subPosIdx = (fileinfo.base64 + "").indexOf(",");
                let headerContent = fileinfo.base64.substr(subPosIdx + 1, 160);
                fileinfo.fileHeader64=headerContent;
                resolve(fileinfo);
            }
        });
    });
}

// 对外暴露的方法，通过这个方法获取文件的ArrayBuffer，内部会根据平台调用不同的方法
export const readFileDataExt = async (filePath:string,mimeType:string) : Promise<FileReaderInfo> => {
    if (uni.canIUse('getFileSystemManager') && uni.getFileSystemManager) {
        return MpReadFile(filePath,mimeType);
    }
    // #ifdef APP-PLUS
    else if (plus.io) {
        return H5PlusReadFile(filePath,mimeType);
    }
        // #endif
    // #ifdef H5
    else if (XMLHttpRequest) {
        return H5ReadBlobUrl(filePath,mimeType);
    }
    // #endif
    else {
        throw new Error('不支持的平台');
    }
};
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

实际运行效果

H5平台

选择图片进行上传：图片的数据如下：

在这里插入图片描述

ps:文件的md5，不同的文件是一定不同的，如果你获得的md5是一样的—那么就好好检查一下，spark获取md5的时候是不是都是同一个东西了。

其他场景有条件再测试。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】