如何实现微信小程序文件与图片的上传，预览，下载

1.文件上传

                addFile() {
				let that = this;
			if (this.fileType1 == '文件') {
					let that = this;
					uni.chooseMessageFile({
						 count: 3, //默认100，限制上传的数量
						// extension: ['.zip', '.doc', '.docx', '.xlsx', '.xls', '.txt', '.ppt', '.pptx',
						// 	'.pdf'
						// ], //想要上传的文件类型,但是对于部分微信版本，该方法失效，所以可以采用下面的方法判断
						// sourceType: ['camera'],
						success(res) {
							that.resFile = res
							console.log('size33',res);
							var isMaxSize = res.tempFiles[0].size / 1024 / 1024 < 10							
							var type = res.tempFiles[0].name.substring(res.tempFiles[0].name.lastIndexOf('.') + 1)
							let arr = ['jpg', 'jpeg', 'png', 'JPG', 'PNG', 'JPEG', 'doc', 'docx', 'DOC', 'DOCX', 'xls',
								'xlsx', 'XLSX', 'XLS', 'pdf', 'PDF'
							]
							if (arr.indexOf(type) == -1) {
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '请选择正确格式的文件', //保存路径
									duration: 2000,
								});
							} else {
								if(!isMaxSize){
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '上传大小不能超过10MB！', //保存路径
										duration: 2000,
									});
								}else{
									that.upLoadFileByUni(res,'file')
									
								}
							}
							console.log('upload0000000000', res);
					
						},
						complete() {
							console.log('yizhixing');
						}
					});
				} else {
					uni.chooseImage({//使用该方法可以选择相册里的图片，或者直接拍照上传图片
						count: 3,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册					 
						success(res) {	
							var isMaxSize = res.tempFiles[0].size / 1024 / 1024 < 10
							if(!isMaxSize){
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '上传大小不能超过10MB！', //保存路径
									duration: 2000,
								});
							}else{
								that.upLoadFileByUni(res,'image')
								
							}
						}
					})
			
				}
			
			},
			//上传文件
			upLoadFileByUni(res) {
				let that = this
				uni.uploadFile({
					url: `https://zzygz.512new.com/api/UniFiler/CaseUpload?flag=${this.fileId}&filetype=${this.fileType}`,
					filePath: res.tempFiles[0].path,
					name: 'file',
					formData: { //调用上传接口需要的参数
						type: res.tempFiles[0].type,
						name: res.tempFiles[0].name,//后端需要用它来获取文件的名字
					},
					header: {
						token: uni.getStorageSync('USER_INFO_KEY').token ? uni.getStorageSync('USER_INFO_KEY').token : ''//携带token
					},
					success: (uploadFileRes) => {
						this.getfile(this.fileId)					
						console.log("上传成功", uploadFileRes);
					},
					complete(res) {
						console.log(res);
					}
				})
			},

2.文件的预览

//预览
			preview(item) {				
				uni.downloadFile({
					url: 'https://zzygz.512new.com/api/UniFiler/PcGet?Id=' + item.id, //下载地址接口返回
					header: {
						token: uni.getStorageSync('USER_INFO_KEY').token ? uni.getStorageSync('USER_INFO_KEY')
							.token : ''
					},
					success: (data) => {
						if (data.statusCode === 200) {
							console.log('data', data);
							//文件保存到本地
							wx.getFileSystemManager().saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									console.log('RESyulan', res);
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '加载中', //保存路径
										duration: 2000,
									});
									console.log('000000000000', res.savedFilePath);
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											showMenu: true, //右上角是否有可以转发分享的功能
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 2000)
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '预览失败',
						});
					},
				});
			},

3.文件的下载

	//下载
			down(item) {
				
				uni.downloadFile({
					url: 'https://zzygz.512new.com/api/UniFiler/PcGet?Id=' + item.id, //下载地址接口返回
					header: {
						token: uni.getStorageSync('USER_INFO_KEY').token ? uni.getStorageSync('USER_INFO_KEY')
							.token : ''
					},
					success: (data) => {
						if (data.statusCode === 200) {
							console.log('data11', data);
							if(item.ext == '.jpg'||item.ext=='.jpeg'||item.ext=='.png'||item.ext == '.JPG'||item.ext=='.JPEG'||item.ext=='.PNG'){
								uni.saveImageToPhotosAlbum({
									filePath: data.tempFilePath,
									success: function() {
										uni.showToast({
											title: '已保存至相册',//图片的下载可以用保存到相册
											duration: 2000
										})
								
									},
									fail: function() {
										uni.showToast({
											title: '保存失败',
											duration: 2000
										})
								
									}
								})
							}else{
								wx.getFileSystemManager().saveFile({
									tempFilePath: data.tempFilePath, //临时路径
									success: function(res) {
										console.log('down', res);
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '文件已保存：' + res.savedFilePath, //保存路径
											duration: 2000,
										});
								
										setTimeout(() => {
											//打开文档查看
											uni.openDocument({
												filePath: res.savedFilePath,
												showMenu: true, //右上角是否有可以转发分享的功能，文件的下载可以用此功能转发给别人来实现下载
												success: function(res) {
													// console.log('打开文档成功');
												}
											});
										}, 2000)
									}
								});
							}
							
							
							//文件保存到本地
							
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '下载失败',
						});
					},
				});
			},