uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器+企业微信H5
Posted qq_45091359
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器+企业微信H5相关的知识，希望对你有一定的参考价值。
一、前言
在uniapp的APP日常开发中，我们时常遇到一些兼容性问题，正如本文所提到的图片的预览和下载。在此功能的开发中，我常遇到以下四个问题：
- 图片预览功能实现，但是PDF,word,xls文件无法打开。
- 安卓的图片预览和文件查看功能正常，ios系统的手机却问题频出，时不时的无法打开文件。
- 图片第一次可以打开，第二次就报404，找不到文件。
- 预览不仅要满足安卓和ios系统，也要使浏览器+企业微信H5也要可以打开文件预览。
二、 图片预览功能实现，但是PDF,word,xls文件无法打开
uni.previewImage()是uniapp的图片预览API,经常与uni.chooseImage()一起使用，不过本文中我们只用到uni.previewImage()即可。注：此API只支持打开图片类型文件。
根据官网文档所说，他只有一个必填参数，那就是urls，也就是图片的路径，因为这个参数是一个数组，我用时，直接把路径放到了一个数组里用,current这个参数是url的索引值，不写就默认是0。
// 预览图片
let url = 'https://www.123.com/'
uni.previewImage(
current: 0,
urls: [url],
success: function(data)
console.log('预览成功');
,
fail: function(err)
console.log(‘预览失败+’+err.errMsg);
);
三、安卓的图片预览和文件查看功能正常，ios系统的手机却问题频出，时不时的无法打开文件。
uni.downloadFile()：把文件下载到本地，返回的是文件下载后的临时路径。必传参数url，string类型。
uni.saveFile(OBJECT)：把文件保存到本地。
uni.openDocument()：在新页面打开打开文件，支持doc, xls, ppt, pdf, docx, xlsx, pptx格式，常常与文件下载连用。
使用简例如下：
uni.downloadFile(
url: url,
success: function(res)
var filePath = res.tempFilePath;
uni.saveFile(
tempFilePath:filePath,
success:function(res)
//保存成功并打开文件
uni.openDocument(
filePath: filePath,
success: (res) => console.log('成功打开文档'),
fail:(res)=>
uni.showToast(
icon:'none',
title:'文件打开失败',
duration:2000
)
)
)
);
在此功能是初始版本中，因为我发现此方法jpg,png等图片格式也都可以打开，抱着侥幸心理，我就不管是什么类型，就都用的这一套代码下载预览，后来安卓的图片预览和文件查看功能正常，ios系统的手机却问题频出，时不时的无法打开文件，改了好几个版本，都没从根本上解决问题。
后来我发现，每次打开图片，安卓手机都是直接打开到相册，但是ios的却是在app页面基础上直接打开，我怀疑是ios系统下载缓存机制与安卓不同，才会出现这样的问题，后来想了一套更加完善的方法(在第六章中展现)。
四、图片第一次可以打开，第二次就报404，找不到文件
这个问题好像是因为我们后端的原因，根据后端要求，让我在每次访问图片链接时，后面都拼接上时间戳，保证每次访问的链接结尾都不一样即可解决。
五、预览不仅要满足安卓和ios系统，也要使浏览器也可以打开文件预览
浏览器使用window.open(url,'_blank')即可打开，_blank是规定在新开页面打开文件，_self是在当前页面打开文件。
注：此方法在浏览器可以打开，但是发布到H5时，不一定有效。原以为H5的打开就类似于浏览器的打开方式，因此见浏览器可以打开，便没有测试。最近突然发现，此方法只能用于浏览器。企业微信H5端想要打开的话，则需要用window.location.assign(url);。
六、最终版本-兼容安卓、ios、浏览器
下面便是我屡败屡战，实践出来的最终结果，既满足了安卓、ios、浏览器三端的兼容问题，又满足了不管图片还是文件都可以预览的条件。
知识补充：通过使用#ifdef、#endif、#ifdef指示符，我们可以区隔一些特定的代码。
let url = data.url
let type = data.type
//如果是app走这里
//#ifdef APP-PLUS
let times = Date.parse(new Date());//拼接时间戳（根据自己项目需要考虑是否拼接）
uni.downloadFile(
url: url+'?code='+times,
success: function(res)
var filePath = res.tempFilePath;
if (type=== 'jpg' || type === 'jpeg' || type === 'png' || type === 'gif' )
//如果是图片走这里
uni.previewImage(
current: 0,
urls: [url],
)
else
//如果是文件走这里
uni.openDocument(
filePath: filePath,
success: (res) => console.log('成功打开文档'),
fail:(res)=>
uni.showToast(
icon:'none',
title:'文件打开失败',
duration:2000
)
)
);
//#endif
//#ifdef H5
//如果是浏览器走这里
window.open(url,'_blank');
//如果是H5走这里，如果这里没效果，可以把window.open(url,'_blank');注释掉试试
window.location.assign(url);
//#endif
创作不易，可以朝我竖一个大拇指嘛~
官方demo修改后的webuploader上传预览图片（兼容IE8） github下载回来的有问题
注意！！！！！
不要使用GitHub上下载回来的webuploader.js，下载回来的webuploader.js会报错 fn 未定义
方便的话去看百度官网的demo 浏览器将其抓包获取webuploader.js文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>WebUploader演示</title> <link rel="stylesheet" type="text/css" href="css/webuploader.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="wrapper"> <div> <div id="uploader"> <div class="queueList"> <div id="dndArea"> <div id="filePicker"> <img src="img/messages-plus.png" /> </div> </div> </div> <!-- <div id="filePicker2"></div>--> <br /><br /><br /> <div class="uploadBtn webuploader-pick">开始上传</div> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/webuploader.js"></script> <script type="text/javascript" src="js/upload.js"></script> </body> </html>
本文出自 “紫枫5966” 博客，请务必保留此出处http://zifeng5966.blog.51cto.com/8763113/1947612
以上是关于uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器+企业微信H5的主要内容，如果未能解决你的问题，请参考以下文章
[每天进步一点点~] uni-app 点击图片实现预览图片列表
前端图片预览，上传前预览，兼容IE7891011，Firefox，Chrome
微信公众号 - 实现 H5 网页在微信内置浏览器中下载文件，可预览和下载 office 文件（doc / xls / ppt / pdf 等）适用于任何前端技术栈网站，兼容安卓和苹果系统！