uniapp 实现文档、图片的下载和预览

需求：uniapp 实现图片以及文件(支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx)的下载并预览

效果：

用到的API:

//下载文件资源到本地
uni.downloadFile(OBJECT)

//保存文件到本地
uni.saveFile(OBJECT)

//预览图片
uni.previewImage(OBJECT)

//新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx
uni.openDocument(OBJECT)

以上api详细使用方法可移步uniapp官网查看：https://uniapp.dcloud.io/api/request/network-file.html#downloadfile

核心代码：

// 下载保存
download(url) {  // url:图片或者文件的地址
	uni.downloadFile({
		url: url,
		success: (data) => {
			if (data.statusCode === 200) {
				//文件保存到本地
				uni.saveFile({
					tempFilePath: data.tempFilePath, //临时路径
					success: function(res) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件已保存：' + res.savedFilePath, //保存路径
							duration: 3000,
						});
						setTimeout(() => {
							that.previewAll(res)
						}, 3000)
					}
				});
			}
		},
		fail: (err) => {
			console.log(err);
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '失败请重新下载',
			});
		}
	})
},
// 预览文件
previewAll(res){
	let url = res.savedFilePath;
	if(/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(url)){ //图片预览
		uni.previewImage({
			urls: [ url ],
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
		    	},
		    	fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}else{ //文件预览
		uni.openDocument({
		showMenu: true,
		filePath: url,
		success: function(res) {
			console.log('打开文档成功');
		},
		fail:(err) => {
			uni.showToast({
				title:'打开文件失败请重试',
				icon:'none'
			})
		}
	});
}

参考链接：https://www.jianshu.com/p/5162abcc57b8