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

人间无虞

已于 2023-07-20 11:44:08 修改

阅读量309

点赞数

文章标签： uni-app 微信小程序小程序

于 2023-07-20 11:28:37 首次发布

本文链接：https://blog.csdn.net/m0_52357960/article/details/131826272

版权

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

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

<view class="btn_div" @tap="clickNav" hover-class="btnHoverClass">
	<view>
		<image class="img" src="@/static/pro_img/down.png" mode="widthFix"></image>
		<view>下载图片</view>
	</view>
</view>

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);
	}
});

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