uniapp微信小程序下载接口返回的图片

由于第一次做,在参考了许多前辈们的方法后,最后找到了一个比较适合自己需求的方法,如下:

1、首先,点击下载按钮 触发下载事件


	
		
		下载图片
	

2、请求代码,responseType= “arraybuffer”, 是请求文件流,必须带入的属性,该属性在uniapp中不支持blob

uni.request({
	url: config.baseUrl + '/core/projectBase/exportImage', //服务请求地址
	data: params, //服务需要的参数
	header: {
		"content-type": "application/json",
		"Authorization": uni.getStorageSync('lifeData').vuex_token,
	},
	method: 'POST', //请求方式
	responseType: "arraybuffer", //此处是请求文件流,必须带入的属性
	success: function(res) {
		if (res.statusCode === 200) {
			var imgSrc = wx.arrayBufferToBase64(res.data); //二进制流转为base64编码
			var save = wx.getFileSystemManager();
			var number = Math.random();
			save.writeFile({
				filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
				data: imgSrc,
				encoding: 'base64',
				success: res => {
					wx.saveImageToPhotosAlbum({ //保存为png格式到相册
						filePath: wx.env.USER_DATA_PATH + '/pic' +
							number + '.png',
						success: function(res) {
							wx.showToast({
								title: '图片下载成功,请到相册查看',
								icon: 'none',
								duration: 2000, //提示的延迟时间,单位毫秒,默认:1500
							})

						},
						fail: function(err) {
							wx.showToast({
								title: '下载失败',
								icon: 'none',
								duration: 2000, //提示的延迟时间,单位毫秒,默认:1500
							})
						}
					})
				},
				fail: err => {
					console.log(err)
				}
			})
		}
	},
	fail: function(error) {
		console.log(error);
	}
});

以上是个人在开发中碰到的功能,以上内容仅供参考,如有问题欢迎纠正

你可能感兴趣的:(uni-app,微信小程序,小程序)