您的位置：首页 > 移动开发

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

2020-02-07 06:27 2501 查看

在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属性

  • 点赞
  • 收藏
  • 分享
  • 文章举报
晓是初晓的晓 发布了11 篇原创文章 · 获赞 0 · 访问量 367 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航