微信小程序:文件下载

目录

第一步 请求资源

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

获取资源

写入资源(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.dataresolve(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.dataresolve({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.dataresolve({res:res.data ,header:res.header}) console.log('requestFile',res)resolve(res)}).catch((err)=>{console.log('接口请求报错err:',err)reject(err)})})
}

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

config.responseType = 'arraybuffer'

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

获取资源

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

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

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

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

	//写入文件setFile(fileData){// https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.appendFileSync.htmllet  filerRes= fileData.reslet 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-1return type[index]}