uniapp 微信、安卓预览文件

uniapp 下载文件官网 uni-app官网

问题

wx.downloadFile

微信小程序wx.downloadFile苹果手机失败显示 file data is empty的解决方案

Android和微信开发者工具使用downloadFile正常，但ios系统上却失败了。经过多次测试，发现原来是上传的文件里面内容为空，所以才会fail所以只要改下，文件大小大于0KB就ok了，downloadFile就能success

uni.openDocument

微信小程序使用wx.openDocument打开文件时报fail filetype not supported

参数fileType 文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx，支付宝小程序仅支持pdf

父组件

<!-- 附件 -->
		<view class="margin-top">
			<file-table ref="filetable"></file-table>
		</view>
  
  
<script>
	import FileTable from "@/packagetask/pages/components/FileTable.vue";
 export default {

	
		components: {
			FileTable,
		},
 		mounted() {
			// this.$refs.filetable.initTable(this.idString, 'todo');
		},
</script>

 子组件 FileTable.vue

扫描二维码关注公众号，回复： 17012315 查看本文章

<template>
	<view>
		<!-- 附件显示 -->
		<view class="" v-if="tableData.length > 0">
			<view v-if="tableData.length > 0" class="text-center padding-tb-sm">--- 附件 ---</view>
			<view v-for="item in tableData" class="cu-form-group text-center grid ">
				<view class="fileimgname" @click="ViewImage(item)">
					<image v-if="item.isShowImg" class="fileimg margin-right-xs" :src="BASE_URL+item.filePath" mode=""
						@error="imageError(item)">
					</image>
					<view :class="item.isShowImg ? 'filename':'filename2' ">
						{
   
   {item.name}}
					</view>
				</view>
				<view class="filedown">
					<a harf="#" style="color: #0081FF;" @click="BeforeDownload(item)">
						下载
						<view class="filesize">
							（{
   
   { parseFloat(item.sizeM) > 1 ? (parseFloat(item.sizeM).toFixed(2)+'M') : (parseFloat(item.sizeM
						*
						1024).toFixed(2) +'KB')}}）
						</view>
					</a>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				BASE_URL: config, //配置路径
				tableData: [],
				isR: false,
			}
		},
		onLoad: () => {},
		methods: {
			// 图片预览
			ViewImage(item) {
				console.log('预览ViewImage', item, item.isShowImg)
				if (item.isShowImg) {
					var url = encodeURI(this.baseurl + item.filePath)
					uni.previewImage({
						urls: [url],
						current: url
					});
				} else {

					console.log(2);
					// // 当微信小程序配置了有域名且备案后的https路径时，用这个方法安卓，微信直接预览
					// uni.navigateTo({
					// 	url: '../../../pages/webview/pdfview?fileUrl=' + item.filePath,
					// 	fail: (err) => {
					// 		console.log(err);
					// 		uni.showToast({
					// 			title: '该文件不支持预览，请下载查看！',
					// 			icon: 'none'
					// 		})
					// 	},
					// })

					//#ifdef APP-PLUS  
					// //安卓app直接下载预览
					// this.download(item.filePath, item.name,item);
					uni.navigateTo({
						url: '../../../pages/webview/pdfview?fileUrl=' + item.filePath,
						fail: (err) => {
							console.log(err);
							uni.showToast({
								title: '该文件不支持预览，请下载查看！',
								icon: 'none'
							})
						},
					})
					// #endif  

					//#ifdef MP-WEIXIN 
					if (item.size > 0) {
						uni.downloadFile({
							url: encodeURI(this.baseurl + item.filePath), //下载地址接口返回
							success: (data) => {
								if (data.statusCode == 200) {
									console.log(data, data.tempFilePath)
									uni.openDocument({
										filePath: data.tempFilePath,
										fileType: item
											.fileType, //wx文件类型 有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
										showMenu: true, //wx右上角是否有可以转发分享的功能
										success: function(res) {
											console.log('打开文档成功', res);
										},
										fail: function(res) {
											console.log('打开文档失败', res);
											uni.showToast({
												icon: 'none',
												title: '打开失败,请前往安卓app下载，或电脑端下载！',
											});
										}
									});
								}
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '打开文档失败',
								});
							},
						});
					} else {
						console.log('item.size', item.size);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件为空，打开文档失败',
						});
					}
					// #endif  
				}
			},
			// 初始化数据
			initTable(id, status) {
				if (status && id) {
					console.warn(`文件模块接收到参数id:${id},status:${status}`);
				} else {
					console.error(`文件模块缺少必要的参数:id或status`);
					return;
				}
				// 判断status
				switch (status) {
					case "start" || "add":
						this.isR = true;
						break;
					case "edit":
						this.isR = true;
						break;
					default:
						this.isR = false;
						break;
				}
				this.$http
					.get(`/hr/cultivate/cultivateInformation/fileList?attributionId=${id}`)
					.then(res => {
						if (res.data.success) {
							//赋值到this.tableData-->显示
							// console.log(res.data.list);
							res.data.list.forEach((e, i) => {
								// console.log(e);
								e.sizeM = (Number(e.size) / 1024 / 1024).toFixed(3);
								const reg = /.+\./;
								const fileType = e.name.replace(reg, "");
								// console.log(fileType);
								e.fileType = fileType;
								e.isShowImg = true;
							});

							this.tableData = res.data.list;
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 点击下载按钮，下载文件前做判断是微信还是安卓，微信图片只能预览长按保存，文件只能打开doc, xls, ppt, pdf, docx, xlsx, pptx
			BeforeDownload(item) {

				//#ifdef APP-PLUS  
				this.download(item.filePath, item.name, item);
				// #endif  

				//#ifdef MP-WEIXIN 
				console.log('是否预览图片', item, item.isShowImg)
				if (item.isShowImg) {
					this.ViewImage(item)
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '长按图片可保存',
					});
				} else if (item.size > 0) {
					this.download(item.filePath, item.name, item);
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '文件为空，下载文件失败，请前往安卓app下载，或电脑端下载！',
					});
				}
				// #endif  

			},
			// 下载
			download(url, name, item) {
				console.log(url, name, 111);

				uni.downloadFile({
					url: encodeURI(this.baseurl + url), //下载地址接口返回
					success: (data) => {
						if (data.statusCode == 200) {
							console.log(data, data.tempFilePath)

							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									console.log('res', res)
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									//打开文件
									setTimeout(function() {
										//#ifdef APP-PLUS  
										uni.openDocument({
											filePath: res.savedFilePath,
											// success: function(res) {
											// 	console.log('打开文档成功');
											// },
											complete: function(res) {
												console.log('打开文档complete',
													res,res.errMsg.indexOf('ok'));
												if (res.errMsg.indexOf('ok') !=
													-1) {
													console.log('打开文档成功');
												} else {
													console.log('打开文档失败');
													uni.showToast({
														icon: 'none',
														title: '打开文档失败,请前往电脑端下载！',
													});
												}
											}
										});
										// #endif  

										//#ifdef MP-WEIXIN  

										uni.openDocument({
											filePath: res.savedFilePath,
											fileType: item.fileType, //wx文件类型 有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
											showMenu: true, //wx右上角是否有可以转发分享的功能
											success: function(res) {
												console.log('打开文档成功', res);
											},
											fail: function(res) {
												console.log('打开文档失败', res);
												uni.showToast({
													icon: 'none',
													title: '打开失败,请前往安卓app下载，或电脑端下载！',
												});
											}
										});
										// #endif  
									}, 1000)

								},
								fail: function(res) {
									console.log('文档保存失败');
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
			// 图片加载失败
			imageError(item) {
				console.log("item", item)
				item.isShowImg = false;
			},
		}
	}
</script>

<style scoped>
	.cu-form-group {
		flex-wrap: nowrap;
		padding: 10rpx 40rpx;
	}

	.fileimgname {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.fileimg {
		width: 1rem;
		height: 1rem;
	}

	.filename {
		width: calc(100% - 1rem - 10rpx);
		word-wrap: break-word;
		text-align: start;
	}

	.filename2 {
		width: calc(100% - 10rpx);
		word-wrap: break-word;
		text-align: start;
	}

	.filedown {
		/* width: 2rem; */
	}

	.filesize {
		font-size: 0.8rem;
		color: #000;
	}
</style>