uniapp点击按钮下载图片

实现点击按钮下载图片功能
在 UniApp 中实现点击按钮下载图片的功能涉及前端页面设计以及 JavaScript 方法编写。具体来说，可以利用 @click 事件监听器响应用户的点击行为，并调用相应的方法执行下载逻辑。
页面结构定义
<template>
<view>
<!-- 定义一个按钮 -->
<button @click="downloadImage">下载图片</button>
</view>
</template>
登录后复制
脚本部分处理
为了完成实际的下载动作，在脚本中需定义 downloadImage 函数来发起网络请求获取目标图像资源并触发浏览器保存文件的行为[^2]：
<script>
export default {
data() {
return {
imageUrl: "https://example.com/path/to/image.png", // 图片URL路径
};
},
methods: {
async downloadImage() {
try {
const res = await uni.downloadFile({
url: this.imageUrl,
success: (res) => {
if (res.statusCode === 200) {
// 下载成功后的回调函数
console.log('Download succeeded');

// 将临时文件转存至本地相册或其他位置
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
complete(res) {
uni.showToast({
title: '已保存到相册',
icon: 'success'
});
}
});

} else {
throw new Error(`Failed to fetch image with status code ${res.statusCode}`);
}
},
fail(err){
console.error('Error downloading file:', err);
uni.showToast({
title: '下载失败，请重试',
icon: 'none'
});
}
});

} catch(error) {
console.error('An error occurred during the process of downloading and saving.', error.message);
}

}
}
};
</script>
登录后复制
此段代码实现了当用户点击“下载图片”的时候会尝试从给定 URL 地址加载一张图片，并将其存储于设备的照片库内；如果遇到任何错误，则显示相应的提示信息告知用户操作未遂的原因[^1]。