uni |
您所在的位置：网站首页 › 文件上传组件如何下载到本地文件 › uni |
uni
|
在APP最近开发的一个功能模块中，需要实现非图片与视频的文件上传与下载功能，查看了很多资料，也踩了不少坑。现在记录一下，希望可以帮到有需要的同学。 一：上传首先需要创建一个web-view页面，在pages.json中配置web-view的页面路径为（/pages/exp/web_view），如下： /*web-view中的src便是我们在app应用中嵌入的H5页面路径*/在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:是一些上传和下载文件的逻辑。 待触发 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属性 |
接下来的实现逻辑便和我们在webapp（移动端网站）的实现没有太大的差别，通过触发input[type=“file”]来调用手机的文件管理器：【本文地址】
今日新闻 |
推荐新闻 |