行业知识
[uniapp小程序][文件和图片预览方法][读取文件/文件夹警告] 无法读取 文件或文件夹不在白名单中, 上传时会被忽略, 在真机上可能无法读取
2026-11-07 04:44:26
来源:互联网转载
文件图片预览方式:
利用微信自带的wx.downloadFile() + wx.openDocument()
uni-app官网 | uni.uploadFile(OBJECT) 详解
https://uniapp.dcloud.net.cn/api/request/network-file.html#downloadfile
uni-app官网 | uni.uni.openDocument(OBJECT)详解
https://uniapp.dcloud.net.cn/api/file/file.html#opendocument
代码如下
读取文件/文件夹警告出现原因:
解决方案:
我们先使用uni.downloadFile把后台接口或者本地的PDF以及其他格式转为获取到本地临时路径。然后再使用uni.openDocument就可以了。
源码如下:
{{ item.name }} // 文件类型识别,用正则去识别不同文件类型,然后对应不同文件类型去做不同操作Preview(item) { console.log(item); // 定义图片类型的正则表达式 const imageRegex = /(\.jpg|\.jpeg|\.png)$/i; // 定义文档类型的正则表达式 const docRegex = /(\.doc|\.docx|\.pdf)$/i; // // 定义其他文件类型的正则表达式 const othersRegex = /(\.txt|\.csv|\.xlsx)$/i; // 利用正则表达式判断文件类型 if (imageRegex.test(item.name)) { console.log("图片类型"); this.lookImage(item.url) //预览图片 } else if (docRegex.test(item.name)) { console.log("文档类型"); this.lookFile(item.url) //预览文件 } else if (othersRegex.test(item.name)) { console.log("其他文件类型"); } else { uni.showToast({ title: `未知文件类型`, icon: 'none', duration: 2000 }) }},// 预览图片lookImage(url) { let imgArray = []; imgArray[0] = url uni.previewImage({current: 0,urls: imgArray })},//预览文件//此处的参数url为uni.uploadFile上传文件,返回的永久地址lookFile(url) {console.log('预览文件的url:',url)uni.downloadFile({url:url,success:function(res){if(res.statusCode === 200){console.log("临时路径",res.tempFilePath)let filePath = res.tempFilePath//调用uni.openDocument打开文件uni.openDocument({filePath: filePath,success: function (res) {console.log("打开文档成功");},fail: function (res) {console.log("uni.openDocument,fail");console.log(res)},complete: function (res) {console.log("uni.openDocument,complete");console.log(res)}});}},fail:function(err){console.log('文件下载失败',err)}})},