微信小程序:文件下载

目录

第一步 请求资源

第二步 获取资源后写入到微信本地

1.获取资源

2.写入资源(wx.getFileSystemManager)writeFile 的api

第三步 读取资源(openDocument与saveImageToPhotosAlbum)

---

第一步 请求资源

下面是请求接口中的脚本内容

export let baseUrl = 'http://192.168.78.112:8081';
//获取头部设置
function getHeader({apicode}){
	//请求和返回消息统一采用json格式。（Content-Type: application/ form-data ）采用UTF-8字符编码。
	let ContentType = "application/json;charset=UTF-8";
	let token = '';
	let headers = {
		['Content-Type']:ContentType,//设置报文格式
		apicode,//具体接口标识，
		token,
	}
	return headers
}
//基础接口
export function baseRequest(config){
	let {url,data,request,header,method,responseType} = config;
	return new Promise((resolve,reject)=>{
		uni.request({
		  url:`${baseUrl}/${url}`,
		  data,
		  method,
		  header,
		  responseType,
		  success: (res) => {
		    console.log("baseRequest:",res);
			// let {datagram,_new} = res.data 
			 resolve(res)
		  },
		  fail: (err) => {
			let {errMsg} = err;
			utils.Toast.showError({title:config})
		    console.error(err);
			// err = {errMsg: "request:fail "}
			reject(err);
		  }
		}); 
	})
}
//组将发送code的接口
export function requestConfig(config){ 
	console.log('requestConfig:',config)
	//接口id  请求参数  请求方法 
	return new Promise((resolve,reject)=>{
		requestBase(config).then((res)=>{
			let {datagram} = res.data
			resolve(datagram) 
			console.log('requestConfig',res)
			resolve(res)
		}).catch((err)=>{
			console.log('接口请求报错err:',err)
			reject(err)
		})
	})
}
//请求业务的接口
export function request(config){ 
	//接口id  请求参数  请求方法  
	config.url = `wechatservice/perform`
	return new Promise((resolve,reject)=>{
		requestConfig(config).then((res)=>{ 
			resolve(res) 
			console.log('request',res)
			resolve(res)
		}).catch((err)=>{
			console.log('接口请求报错err:',err)
			reject(err)
		})
	})
}
//请求下载列表的接口
export function requestFile(config){ 
	//接口id  请求参数  请求方法 
	config.url = `/wechatservice/file`
	config.responseType = 'arraybuffer'
	return new Promise((resolve,reject)=>{
		requestBase(config).then((res)=>{
			let {_new} = res.data
			resolve({res:res.data ,header:res.header}) 
			console.log('requestFile',res)
			resolve(res)
		}).catch((err)=>{
			console.log('接口请求报错err:',err)
			reject(err)
		})
	})
}

其中资源请求中需要注意的是本接口

//请求下载列表的接口
export function requestFile(config){ 
	//接口id  请求参数  请求方法 
	config.url = `/wechatservice/file`
	config.responseType = 'arraybuffer'
	return new Promise((resolve,reject)=>{
		requestBase(config).then((res)=>{
			let {_new} = res.data
			resolve({res:res.data ,header:res.header}) 
			console.log('requestFile',res)
			resolve(res)
		}).catch((err)=>{
			console.log('接口请求报错err:',err)
			reject(err)
		})
	})
}

因为服务器返回的是二进制，于是需要把配置返回的数据内容改为arraybuffer

config.responseType = 'arraybuffer'

第二步 获取资源后写入到微信本地

1.获取资源

onclick(){  
	let {showLoading,hideLoading} = util.Toast
	let fileurl= this.fileurl
	showLoading()
	downloadPDFFileData(fileurl).then((data)=>{
		console.log('res:',data)
		// 同步接口
		try {
		    this.setFile(data)
		} catch(e) {
			console.error(e)
			hideLoading()
		}
		}).catch(()=>{
			hideLoading()
		})
},

2.写入资源(wx.getFileSystemManager)writeFile 的api

只有把文件写入本地，才能去处理本地的文件

其中写入文件很重要，地址微信光放提供了一个【wx.env.USER_DATA_PATH】的基础地址，在后面加上自己的就好了

	//写入文件
			setFile(fileData){
				// https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.appendFileSync.html
				let  filerRes= fileData.res
				let header = fileData.header;
				let $this = this 
				let  filePath = `${wx.env.USER_DATA_PATH}/${this.filename}`;//写入本地文件
				console.log('filePath:',filePath);
				let {hideLoading} = util.Toast;
				const fs = wx.getFileSystemManager()
				fs.writeFile({
				  filePath,
				  data: filerRes, 
				  success(res) {
					  hideLoading()
					  let fileType = $this.getFileType(header);
					  let txt = fileType == 'txt';//是文本格式
					  let img = $this.imgType.indexOf(fileType)>=0;//是图片
					  let canShow = $this.canShow.indexOf(fileType)>=0;//是能展示的
					  if(txt){
						  //文本
					  }else if(img){
						  //展示图片
						  $this.imageSrc = filePath;
					  }else if(canShow){
						  $this.openDocument(filePath,fileType)
					  }
					  console.log('fileType:',fileType) 
				  },
				  fail(res) {
					  hideLoading()
				    console.error(arguments)
				  }
				})
			},

第三步 读取资源(openDocument与saveImageToPhotosAlbum)

            //打开指定文档
			openDocument(filePath,type){
				uni.openDocument({
				  filePath: filePath,
				  showMenu: true,
				  fileType:type,
				  success: function (res) {
					console.log('打开文档成功');
				  },
				  fail(res) {
				    console.error(arguments)
				  }
				});
			},
			saveImage(filePath){
				uni.saveImageToPhotosAlbum({
				  filePath,
				  success(res) { console.log('储存成功')
				  }
				})
			},
			//获取文件类型
			getFileType(headerInfo){ 
				console.log('headerInfo:',headerInfo)
				let ContentDisposition = headerInfo['Content-Disposition']
				let type = ContentDisposition.split('.');
				let index = type.length-1
				return type[index]
			}