[uniapp小程序][文件和图片预览方法][读取文件/文件夹警告] 无法读取 文件或文件夹不在白名单中, 上传时会被忽略, 在真机上可能无法读取

时间：2025-02-07 07:17:27

文件图片预览方式：

利用微信自带的() + ()

 uni-app官网 | (OBJECT) 详解

/api/request/#downloadfile

uni-app官网 | (OBJECT)详解

/api/file/#opendocument

代码如下

读取文件/文件夹警告出现原因：

以上警告是由于微信小程序的安全策略导致的。微信小程序对于网络请求和文件读取都有一些限制，其中包括白名单机制。如果你的小程序中的文件不在白名单中，那么在真机上可能无法读取。

解决方案：

我们先使用把后台接口或者本地的PDF以及其他格式转为获取到本地临时路径。然后再使用就可以了。
 

源码如下：

<view class="" v-for="(item, index) in Lists" :key="index">
	<view class="flex">
		<view class="u-flex" @click="Preview(item)">{{  }}</view>
	</view>
</view>
// 文件类型识别，用正则去识别不同文件类型，然后对应不同文件类型去做不同操作
	Preview(item) {
	      (item);
	      // 定义图片类型的正则表达式
	      const imageRegex = /(\.jpg|\.jpeg|\.png)$/i;
	      // 定义文档类型的正则表达式
	      const docRegex = /(\.doc|\.docx|\.pdf)$/i;
	      // // 定义其他文件类型的正则表达式
	       const othersRegex = /(\.txt|\.csv|\.xlsx)$/i;
	      // 利用正则表达式判断文件类型
	      if (()) {
	        ("图片类型");
	        () //预览图片
	      } else if (()) {
	        ("文档类型");
	        () //预览文件
	      } else if (()) {
	        ("其他文件类型");
	      } else {
	        ({
	          title: `未知文件类型`,
	          icon: 'none',
	          duration: 2000
	        })
	      }
	},

// 预览图片
	lookImage(url) {
	    let imgArray = [];
	    imgArray[0] = url
	    ({
			current: 0,
			urls: imgArray
	    })	
	},

//预览文件
//此处的参数url为上传文件，返回的永久地址
	lookFile(url) {
		('预览文件的url:',url)
		({
			url:url,
			success:function(res){
				if( === 200){
					("临时路径",)
					let filePath = 
					//调用打开文件
					({
						filePath: filePath,
						success: function (res) {
							("打开文档成功");
						},
						fail: function (res) {
							(",fail");
							(res)
						},
						complete: function (res) {
							(",complete");
							(res)
						}
					});
				}
			},
			fail:function(err){
				('文件下载失败',err)
			}
		})
	},


 

相关文章