uni-app实现文件上传、下载、预览（非只图片和视频）

缺乏、安全感 2022-11-27 03:29 4507阅读 1赞

## 需求 ##

在项目中要求在当前页面上传、下载和预览多种格式文件，需要兼容H5（在app中打开）、Android、IOS、微信小程序，文件类型包含word、excel、ppt、pdf、zip、rar、图片。

## 上传 ##

第一步，肯定是先去翻uni-app的文档，期望着官方能够上传、下载、预览一条龙的包干了，调调api就行了。然而理想是丰满的，现实是残酷的。

既然要上传文件，那肯定要先选择到文件，先找找选取文件的api吧。看看我找到了什么：

*  uni.chooseImage从本地相册选择图片或使用相机拍照。
 *  input组件 没有type=file

连选择文件都做不到，只能求助大佬了。出发吧，插件市场。

### APP端上传（这里用插件） ###

在插件市场中，搜索到的插件基本都是只实现了APP端和微信小程序的，我选择了一个下载量最多的。  
![在这里插入图片描述][20200813163308608.png_pic_center]  
按照教程一步步来，更换一下上传地址，添加一下参数，果然可以了。至此已经解决了Android和IOS的上传。小程序上的我还没测试。  
接下来就是H5的上传了

### H5上传 ###

因为产品的需求是在当前页面上传，那么久不用考虑web-view了。最后还是决定用的动态创建input file选择文件。

至此，文件选择已经完成了。接下来就是上传了。找找uni-app的api。

> 1、uni.uploadFile

很好，uni-app中自带了一个上传的方法，这下上传应该是稳了，我们看看它的参数  
![在这里插入图片描述][20200813155812962.png_pic_center]  
what？只支持image、video、audio三种格式的文件，看来是白高兴一场了。  
不过也没事，我可以通过网络请求传formData啊。开搞开搞…

> 2、uni.request

调用一下api，将选择好的文件传入formData，竟然报错  
![在这里插入图片描述][20200813160602739.png_pic_center]  
查看了request的文档才知道，它支持Object/String/ArrayBuffer类型的data。

那么request也不能用，那看看上面的插件是怎么做的上传呢，学习一下。原来是用的原生的XMLHttpRequest去做的。那就跟着大佬的脚步走吧,附上完整代码

至此文件上传已经完成了，接下来就是下载和预览了。

### 下载和预览 ###

在uni-app的api中有uni.downloadFile和uni.saveFile可以将文件保存到本地，uni.openDocument可以打开文件。但是这三个api都不支持H5。那就先用两个方法先解决APP端的下载和预览。

uni.downloadFile({ 
    	url: '接口地址',
    	success: res => { 
    		let filePath = res.tempFilePath;
    		if (open) {  // open存在，代表预览操作
    			let system = uni.getSystemInfoSync().platform;
    			if (system == 'ios') { 
    				filePath = encodeURI(filePath);
    			}
    			uni.openDocument({ 
    				filePath,
    				success: () => { 
    					console.log('打开文档成功');
    				},
    				fail: error => { 
    					console.log(error)
    				}
    			});
    		} else {   // open不存在，代表下载操作
    			uni.saveFile({ 
    				tempFilePath: filePath,
    				success: () => { 
    					uni.showToast({ 
    						title:'下载成功'
    					})
    				},
    				fail:()=>{ 
    					uni.showToast({ 
    						title:'下载失败'
    					})
    				}
    			})
    		}
    	},
    	fail:()=>{ 
    		if(!open){ 
    			uni.showToast({ 
    				title:'下载失败'
    			})
    		}
    	}
    })

APP端的下载完全就是调用api了，没什么问题了。下面开始H5的下载和预览，我使用的是a标签download。

> Android上的app内访问

一开始我调用的下载接口，后端返回的是文件的二进制流，在PC端测试的时候是可以下载的，但是一放到app中访问就不行。

const res=await downloadFile(参数);
    const blob = new Blob([res]);
    const tempLink = document.createElement('a');
    tempLink.href = URL.createObjectURL(blob);
    tempLink.setAttribute('download', name);
    tempLink.click();

后来就去查了一下，原来在Android环境app的webview中是不支持a标签下载blob的。

const tempLink = document.createElement('a');
    tempLink.href = '下载地址';
    tempLink.setAttribute('download', name);
    tempLink.click();

ok，让后端同事提供一个get请求的接口，直接返回文件，再试一下。

这下文件直接打开了，去文件管理器中查找了一下，发现图片是没有保存下来的，而其他offce文件确实下载下来了。  
![office文件是下载][office]  
![图片提示手动保存][20200813174402405.png_pic_center]  
再到IOS试一下，发现也是一样的。因为技术有限，也就只能做到这个程度了，最后与产品协商后，在APP端显示下载、预览按钮，在H5端只显示预览按钮。

至此，uni-app中文件上传、下载、预览的功能大部分的实现了，如果大佬们有什么好的方案，请不吝赐教，也欢迎指正文中不正确的地方。

[20200813163308608.png_pic_center]: /images/20221124/50df140d067241ff8fca23ba1283a619.png
[20200813155812962.png_pic_center]: /images/20221124/f1066497a75c48de85a29038e56ddf92.png
[20200813160602739.png_pic_center]: /images/20221124/fa18c1498e3c47bdbc91bf14fccf505c.png
[office]: /images/20221124/660e70ec53b945c4ab3238dbeb363055.png
[20200813174402405.png_pic_center]: /images/20221124/0c2038b0eaf54c10bde1c6cc122040a4.png