uni-app：web-view实现文件（非图片视频文件）上传与下载

最新推荐文章于 2024-08-21 23:53:05 发布

晓是初晓的晓

最新推荐文章于 2024-08-21 23:53:05 发布

阅读量5.7k

点赞数 1

分类专栏： uni-app 文章标签：文件上传文件下载封装ajax请求

本文链接：https://blog.csdn.net/weixin_43637545/article/details/103452323

版权

uni-app 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

在APP最近开发的一个功能模块中，需要实现非图片与视频的文件上传与下载功能，查看了很多资料，也踩了不少坑。现在记录一下，希望可以帮到有需要的同学。

一：上传

首先需要创建一个web-view页面，在pages.json中配置web-view的页面路径为（/pages/exp/web_view），如下：

<template>
	<view>
		/*web-view中的src便是我们在app应用中嵌入的H5页面路径*/
		<web-view src="/hybrid/html/index.html"></web-view>
	</view>
</template>
<script></script>
<style><style>

在APP应用页面中点击上传按钮，跳转进web-view页面，H5页面便通过src加载到当前的web-view页面。

//点击上传按钮跳转进web-view页面
uni.navigateTo({
 	url:'/pages/exp/web_view'
 })

此时文件目录是这样的：
/hybrid/html/index.html：是H5页面的一些布局。
/hybrid/html/js/h5-uploader.js:是一些上传和下载文件的逻辑。
在这里插入图片描述
接下来的实现逻辑便和我们在webapp（移动端网站）的实现没有太大的差别，通过触发input[type=“file”]来调用手机的文件管理器：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<title>文件管理</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<head>
	<body>
		<div>
			<button type="button">打开文件管理器</button>
			<input class="file" type="file" />
		</div>
	</body>
	<!--要在H5页面中使用uni-app的webview，则需要引入该文件-->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script src="js/h5-uploader.js" type="text/javascript" charset="utf-8"></script>
</html>

待触发 UniAppJSBridgeReady 事件后，即可调用 uni 的 API，也表明H5页面已经嵌入到APP应用中。

let fileDom = document.querySelector(".file");
document.addEventListener('UniAppJSBridgeReady',()=>{
	fileDom.addEventListener('change', (event) => {
		  let file = fileDom.files[0];         //获取到所选择的文件信息
		  //在该监听函数中进行判断（文件格式、大小等）、上传等操作
	})
})

在该H5页面中使用的前后端数据交互是对原生ajax进行封装，如下：

/* 
 * request
 * @param data:post请求传递的数据
 * @param url: 请求地址,
 * @param header:{},请求头
 * @param successFn 成功回调
 * @param failFn 失败回调
 * @param successData 成功回调函数的参数
 * @param failData 失败回调函数的参数
 * */
function request(data,url,header,successFn,failFn,successData,failData){
	if(!url){return false;}
	let xhr = null;
	if(window.XMLHttpRequest){
	   //大多数浏览器
	   xhr = new XMLHttpRequest();
	}else{
	   //古董级浏览器
	   xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xhr.open("POST", url, true);
	let headers = Object.assign({},header,{
	   //请求中需要携带的身份信息，如token、platform等
		'Token':token,
		'Platform':'APP',
	})
	
	for (let keys in headers) {
		xhr.setRequestHeader(keys, headers[keys]);
	}
	xhr.send(data);
	
	xhr.ontimeout = function(){
		// xhr请求超时事件处理
		failFn&&failFn('请求超时');
	};
	xhr.onreadystatechange = (ev) => {
		if(xhr.readyState == 4) {
			if (xhr.status == 200) {
				let obj = JSON.parse(xhr.responseText);
				successFn&&successFn(obj,successData);
			}else {
				failFn&&failFn(failData);
			}
		}
	};
}

在进行request请求时，需注意两点：
（1）：request中接收的data必须由JSON.stringify转换成JSON字符串格式，否则后端接收不到；如：

data = "age=18&name=xxx";              //错误
data =JSON.stringify( {"age":18,"name":"xxx"});        //正确

（2）：在进行文件上传时，我们会把文件转换成FormData格式，此时request请求不可以设置任何请求头，否则后端接收不到（如：{“Content-type”:“application/x-www-form-urlencoded;charset=utf-8”}）。ajax会自动辨别你的传输格式，进行传递。

二：下载

在H5页面中进行文件下载的方式很简单，就是创建a标签，赋予链接等属性，然后主动触发click事件即可。

let aLink = document.createElement('a');
aLink.setAttribute('id','downLink');
aLink.setAttribute('href',"文件链接");
aLink.setAttribute('download',"文件名称");               //在此处进行文件命名并没有成功，具体原因如下
document.getElementById('downLink').click();

参考a标签的download属性