# 鸿蒙文件上传和下载功能 ## 前言上上一篇文章写了鸿蒙图片视频的拍摄及选取，用的都是系统API，拿到图片和视频的uri后，肯定还要配合上传功能的。上篇文章介绍了下权限申请和网络请求，其实也是给这篇文章打基础，下面会用到相关内容，下面就来讲下鸿蒙里的文件上传与下载！ ## 文件服务在上传文件之前，需要先了解下鸿蒙里面文件的划分，看API介绍分成了下面三种: - 应用文件 - 用户文件 - 系统文件和安卓差不多吧，应用文件就是私有文件，不需要权限，用户文件的访问需要动态申请权限，通过URI访问及分享，我们上一篇文章拿到的图片视频地址就是URI。对于应用文件，我们可以通过“@ohos.file.fs”去操作，不过我感觉不如Java的File API啊，下面给一些我用到的例子吧: ```ts // 判断文件夹是否存在，不存在就创建 let dir = context.cacheDir + '/' + type if (!fs.accessSync(dir)) { fs.mkdirSync(dir) } // 判断文件是否存在，存在就删除 let path = context.cacheDir + `/audio/xxx.wav`; if (fs.accessSync(path)) { fs.unlinkSync(dir); } // uri文件复制到缓存目录 let file = await fs.open(uri, fs.OpenMode.READ_ONLY) let newPath = context.cacheDir + `/audio/xxx.wav` if (file){ await fs.copyFile(file.fd, newPath) } // 读取文件名 let file = await fs.open(path, fs.OpenMode.READ_ONLY); let fileName = file.name // 读取文件大小 let stat = await fs.stat(path); let fileSize = stat.size // 计算MD5 let fileKey = await Hash.hash(path, "md5"); ``` ## 文件下载如果文件只是下载到应用目录是不需要权限的，所以文件下载也是比文件上传简单点，直接看代码: ```ts /** * 下载文件 * * @param context 上下文 * @param downloadUrl 下载路径 * @param downloadPath 文件路径 */ async downloadFile( context: Context, downloadUrl: string, downloadPath: string = "" ): Promise { return new Promise((resolve, reject) => { try { // 下载图片缓存地址 if (downloadPath == "") { let dir = context.cacheDir + '/image' if (!fs.accessSync(dir)) { fs.mkdirSync(dir) } downloadPath = context.cacheDir + `/image/image_${new Date().getTime()}.jpg` } request.downloadFile(context, { url: downloadUrl, filePath: downloadPath }).then((downloadTask: request.DownloadTask) => { downloadTask.on('complete', () => { LogUtil.d('download complete: ' + downloadPath); resolve(downloadPath); }) }).catch((err: BusinessError) => { LogUtil.e(err.message); reject(err.message); }); } catch(e) { LogUtil.e(e) reject(e) } }); } ``` 也就需要两个参数，一个下载地址，一个文件目录，downloadTask可以用来监控进度和完成，没啥好说的。 ## 文件上传文件上传可就麻烦了，特别是江相册选取的图片上传，需要先申请权限，再把文件复制到应用目录，再上传，而且还有坑，下面一个一个来看吧。 ### ~~权限申请~~ **ps. 实测使用，通过系统选取的文件有临时权限，只读的话不需要权限。** 在相册选取的图片，如果要访问的话，是要申请文件权限的，也就是我们上篇文章举的例子的: ```ts "ohos.permission.READ_MEDIA" ``` 动态申请的部分，我们用上篇文章的方法，我把方法写到了PermissionUtil文件，读者可以自己创建个: ```ts /** * 单个权限 * * @param permission * @returns */ async checkAndRequestPermission( permission: Permissions, context: Context ): Promise { return new Promise(async (resolve, reject) => { let grantStatus: abilityAccessCtrl.GrantStatus = await this.checkAccessToken(permission); if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) { // 已经授权，可以继续访问目标操作 resolve("success: " + permission) } else { // 申请权限 this.requestPermissions([ permission ], context, resolve, reject) } }); } // 先申请权限 let permissionUtil = new PermissionUtil() let result = await permissionUtil.checkAndRequestPermission("ohos.permission.READ_MEDIA", this.context) if (result.indexOf("success") < 0) { reject("permission denied") return } ``` 这里上传图片，我就直接同步调用方便些了。 ### 复制到应用目录获取到权限后，我们就有能力去访问文件并复制了，下面是复制代码: ```ts /** * 复制文件到私有缓存目录 * * @param path 原路径 * @param type 类型 * @param context 上下文 * @returns 新路径 */ async copyFileToCache(path: string, type: string, context: Context): Promise{ return new Promise(async (resolve, reject) => { try { let file = await fs.open(path, fs.OpenMode.READ_ONLY) if (file){ let dir = context.cacheDir + '/' + type if (!fs.accessSync(dir)) { fs.mkdirSync(dir) } let end: string = type.indexOf("image") >= 0 ? "jpg" : "mp4"; let newPath = context.cacheDir + `/${type}/${type}_${new Date().getTime()}.${end}` await fs.copyFile(file.fd, newPath) LogUtil.d("copyFileToCache newPath: " + newPath) resolve(newPath) } reject("open file fail") } catch (err){ LogUtil.d("copyFileToCache err: " + err.message) reject(err.message) } }); } ``` 我这就两种文件，图片和视频，所以加了个type用来控制文件的目录和后缀名，当然读者也可以自行修改，用文件的原名称。 ### 上传文件上篇文件我们用官方API写了get和post请求的例子，下载文件类似，只是要多加点东西，下面看封装的代码: ```ts /** * 上传文件(官方API，不支持单文件上传) * * @param context 上下文 * @param uploadUrl 上传路径 * @param path 文件路径(上传专用路径!!) * @param header 自定义请求头 * @param textMap 文字部分请求 * @param onSuccess 成功回调 * @param onFailed 失败回调 */ async uploadFile( context: Context, uploadUrl: string, path: string, header: Record, textMap: Map, onSuccess: (message: string)=> void, onFailed: (error: string) => void ){ let fileName = `${path.split("cache/")[1]}`; let files: Array = [ { name: 'image', filename: fileName, uri: path, type: 'image' } ] let data = new Array(textMap.size) textMap.forEach((value, key)=> { data.push({ name: key, value: value }) }) let config: request.UploadConfig = { url: uploadUrl, method: 'POST', files: files, header: header, data: data } try { request.uploadFile( context, config ).then((uploadTask: request.UploadTask) => { LogUtil.d("uploadFile then") uploadTask.on("progress", (uploadedSize, totalSize)=> { LogUtil.d("uploadFile progress: " + uploadedSize + "/" + totalSize) }) uploadTask.on("fail", (data)=> { LogUtil.d("uploadFile fail: " + JSON.stringify(data)) }) uploadTask.on('complete', (taskStates: Array) => { for (let i = 0; i < taskStates.length; i++) { LogUtil.d(`upload complete taskState: ${JSON.stringify(taskStates[i])}`); onSuccess(JSON.stringify(taskStates[i])) } }); }).catch((err: BusinessError)=>{ LogUtil.d("uploadFile error:" + err.message) onFailed(err.message) }) } catch (error) { LogUtil.d((error as BusinessError).message) onFailed("uploadFile error:" + (error as BusinessError).message) } } ``` 这里有两部分内容，一个是文件数组，一个是文字部分，就是multipart的上传，如果没有文字部分可以忽略这部分代码。下面是使用例子: ```ts // 修改路径(上传使用) let newPath: string = `internal://cache/${path.split("cache/")[1]}` // 自定义header let header: Record = { 'Authorization': this.token, 'Content-Type': "multipart/form-data; boundary=" + "---------------------------", } // 文字部分 let textMap = new Map(); textMap.set('file', path); textMap.set('fileSize', '' + fileSize); textMap.set('fileKey', fileKey); transfer.uploadFile(this.context, url, newPath, header, textMap, (message) => { LogUtil.d("success: " + message) callback("success: " + message) }, (error) => { LogUtil.d("error:" + error) callback("error:" + error) }) ``` 这里有两个坑要注意下，第一个是上传路径要重新修改，将应用文件目录修改成下面形式: ```ts // 修改路径(上传使用) let newPath: string = `internal://cache/${path.split("cache/")[1]}` ``` 第二个就是，这里文件上传必须要求服务端能够接收多个文件的上传，不然就会报错，我真的很无语。 ### 自定义上传因为我们的服务端不支持接收多个文件上传，所以只能弃用官方API，自己写一个了，也算是学习了下http的multipart上传，下面慢慢道来。 ps. 如果使用的话，还是不太建议下面方法，小文件还好，大文件还是用优秀的三方库吧，当然用来学习知识的话，还是非常阔以的！ #### multipart上传首先我们来看下HTTP协议里面multipart形式，举个例子: ```ts POST http://www.example.com HTTP/1.1 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="text" title ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="file"; filename="chrome.png" Content-Type: image/png PNG ... content of chrome.png ... ------WebKitFormBoundaryrGKCBY7qhFd3TrwA-- ``` 第一行说明了请求类型，第二部分是header，在multipart上传的时候，需要设置好Content-Type的类型为"multipart/form-data"，并设置好boundary，下面boundary会用来分割数据。第三部分就是项目的multipart数据了，它在body里面，和header隔了一个空行，每一个部分格式如下: ```ts ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="text" title ``` 每一个部分以"--"开头，加上boundary，说明Content-Disposition后，再隔一个空行，放置数据部分，然后不空行接上下一个部分。最后，当数据结束的时候，以"--" + boundary，再加上"--"结尾: ```ts Content-Disposition: form-data; name="file"; filename="chrome.png" Content-Type: image/png PNG ... content of chrome.png ... ------WebKitFormBoundaryrGKCBY7qhFd3TrwA-- ``` 所以嘛，我们只要构建这样一个body就能够自定义上传功能了，下面就开始动手。 #### 构建multipart上传body 下面我们就在上一篇文章的postForm的基础上改，在它的extraData放上我们自定义的multipart上传body就OK了，下面是整体结构: ```ts /** * 上传文件(自定义body，只支持小文件) * * @param uploadUrl 上传路径 * @param path 文件路径(普通文件路径) * @param header 自定义请求头 * @param textMap 文字部分请求 * @param contentType 文件类型 * @param onSuccess 成功回调 * @param onFailed 失败回调 */ async uploadFileCustom( uploadUrl: string, path: string, header: Record, textMap: Map, contentType: string, onSuccess: (message: string)=> void, onFailed: (error: string) => void ){ let fileName = `${path.split("cache/")[1]}`; // 上传文件使用的分隔符 let boundary: string = '---------------------------' // 构建文字部分 let textContent: string = this.buildTextContent(textMap, boundary) // 选择要上传的文件的内容 let fileContent: ArrayBuffer = await this.readContentFromFile(path) // 上传请求的body内容 let bodyContent = this.buildBodyContent(fileName, contentType, boundary, textContent, fileContent) // http请求对象 let httpRequest = http.createHttp(); let opt: http.HttpRequestOptions = { method: http.RequestMethod.POST, header: header, extraData: bodyContent } // 发送上传请求 httpRequest.request(uploadUrl, opt) .then((resp) => { onSuccess(JSON.stringify(resp.result)) }) .catch((e: BusinessError) => { onFailed("uploadFile error:" + (e as BusinessError).message) }) } ``` multipart上传body的构建就三步，第一构建文字部分，第二步读取文件，第三步合并两部分构建完整body。下面先来构建文字部分，按上一节的格式，代码很简单: ```ts private buildTextContent(textMap: Map, boundary: string): string { let result = "" textMap.forEach((value, key)=> { result += ("\r\n--" + boundary + "\r\n") result += ("Content-Disposition: form-data; name=\"" + key + "\"\r\n\r\n") result += value }) return result } ``` 然后读取文件，保存数据到ArrayBuffer: ```ts // 从文件读取内容 private async readContentFromFile(path: string): Promise { // 读取文件大小 let stat = fs.statSync(path) let fileSize = stat.size let buf = new ArrayBuffer(fileSize); let file = fs.openSync(path, fs.OpenMode.READ_ONLY); let readLen = fs.readSync(file.fd, buf, { offset: 0 }); let result = buf.slice(0, readLen) fs.closeSync(file); return result } ``` 最后合并两部分，构建完整body: ```ts // 构造上传文本文件的body内容 private buildBodyContent(fileName: string, contentType: string, boundary: string, textContent: string, fileContent: ArrayBuffer) { let content = textContent content += ("\r\n--" + boundary + "\r\n") content += ("Content-Disposition: form-data; name=\"" + "file" + "\"; filename=\"" + fileName + "\"\r\n") content += ("Content-Type:" + contentType + "\r\n\r\n") let contentArray = this.str2ab(content) let body = this.mergeArrayBuffers(contentArray, fileContent) let end = this.str2ab("\r\n--" + boundary + "--\r\n") body = this.mergeArrayBuffers(body, end) return body } private str2ab(str: string): ArrayBuffer { let buf = new ArrayBuffer(str.length); let bufView = new Uint8Array(buf); for (let i = 0, strLen = str.length; i < strLen; i++) { bufView[i] = str.charCodeAt(i); } return buf; } private mergeArrayBuffers(buffer1: ArrayBuffer, buffer2: ArrayBuffer): ArrayBuffer { // 创建一个新的 ArrayBuffer，大小为两个输入 ArrayBuffer 的总长度 const mergedBuffer = new ArrayBuffer(buffer1.byteLength + buffer2.byteLength); // 创建视图以便操作合并后的 ArrayBuffer const mergedView = new Uint8Array(mergedBuffer); // 创建视图以便读取原始 ArrayBuffer 的数据 const buffer1View = new Uint8Array(buffer1); const buffer2View = new Uint8Array(buffer2); // 将第一个 ArrayBuffer 的数据复制到合并后的 ArrayBuffer mergedView.set(buffer1View, 0); // 将第二个 ArrayBuffer 的数据复制到合并后的 ArrayBuffer mergedView.set(buffer2View, buffer1.byteLength); return mergedBuffer; } ``` 看起来很复杂，实际逻辑很简单，一些工具属性的方法，可以丢给GPT生成，比如上面的str2ab和mergeArrayBuffers。这样就完成了自定义上传功能了，只不过现在我们的body是放在ArrayBuffer的，而ArrayBuffer的性能如何，能放多大的数据，咱就不太懂了，就算有okio类似的机制，在复制拼接过程中会不会影响性能，我也不知，所以最好还是不要读取大文件吧。 ## 小结这篇文章先介绍了下鸿蒙的文件，然后用鸿蒙官方API实现了上传和下载功能，有所封装，最后还以自己构建的multipart上传body实现了下文件上传功能。