uniapp的文件上传及下载

P7Dreamer_Matt
1,718 阅读2分钟

前言

最近公司用uniapp做了一个微信小程序,在开发过程中遇到了一些问题并找到了解决方法和大家一起分享 ~ 主要遇到的问题如下

  1. uniapp开发微信小程序如何下载并导出PDF文件

  2. uniapp开发微信小程序在后端的要求下如何上传formData格式的文件

下载并导出PDF文件

1674533266650.png

后端接口传来的是如上图所示的stream流文件，我当初第一想法是简单~ new blob()对象即可：
即**通过window.URL.createObjectURL，接收一个Blob（File）对象，将其转化为Blob URL,然后赋给 a.download属性，然后在页面上点击这个链接就可以实现下载了**

image.png

实践出真知发现不行 ### 使用Blob方法转换文件流的皆不可采用, new Blob及window.URL.createObjectURL都是适用于js对象,小程序不生效！！！！
没办法后来通过查阅资料决定使用 wx.getFileSystemManager() + wx.openDocument,将流文件通过微信全局唯一的文件管理器将文件暂存到临时路径中再配合wx.openDocument打开文件及完成微信小程序端的流文件下载啦~
下面代码是我自己使用并封装的，亲测可用哦~

image.png openDocument这个官方提供的方法里showMenu这个属性特别重要,因为微信里并不是PC端那样帮你完成文件下载然后保存到本地，你只能通过右上角三个点通过分享的形式被动的完成文件的下载功能。

1674535798325.png

上传formData格式的文件（包含图片）

一个form表单文件上传功能,后端要求必须传formData格式,当时心想简单,new FormData()然后调上传接口即可,可惜现实还是打脸的,小程序里无法new FormData(),原因和上面下载时使用的new Blob是相同原因,怎么办呢，我陷入了沉思,不过uniapp的官网里提供了 uni.uploadFile方法

1674536908786.png

不过这个有个需要注意的点****filePath必填且为本地地址图片****, 不然文件上传的时候会报如下错误

1674537248708.png

既然uni.uploadFile方法需要本地资源文件那就只能通过 uni.downloadFile 方法下载文件资源到本地

1674537599254.png

具体实现代码如下：

image.png

* 第一次写文章如有错误还请指出 ~ 愿我们一起进步。我是一位普通的前端,但希望未来可以变得不再普通。

作者：&P7Dreamer 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

avatar
文章
阅读
粉丝