save-image-to-photos-album.uvue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <!-- #ifdef APP -->
  3. <scroll-view style="flex:1">
  4. <!-- #endif -->
  5. <page-head :title="title"></page-head>
  6. <view class="uni-padding-wrap">
  7. <image class="image" src="/static/uni.png"></image>
  8. <button class="margin-top-10" type="primary" @click="saveImage">将图片保存到手机相册</button>
  9. </view>
  10. <!-- #ifdef APP -->
  11. </scroll-view>
  12. <!-- #endif -->
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. title: "saveImageToPhotosAlbum",
  19. // 自动化测试
  20. success: false
  21. }
  22. },
  23. methods: {
  24. saveImage() {
  25. uni.saveImageToPhotosAlbum({
  26. filePath: "/static/uni.png",
  27. success: (res) => {
  28. console.log("saveImageToPhotosAlbum success", JSON.stringify(res));
  29. uni.showToast({
  30. position: "center",
  31. icon: "none",
  32. title: "图片保存成功,请到手机相册查看"
  33. });
  34. this.success = true;
  35. },
  36. fail: (err) => {
  37. uni.showModal({
  38. title: "保存图片到相册失败",
  39. content: JSON.stringify(err),
  40. showCancel: false
  41. });
  42. this.success = false;
  43. }
  44. })
  45. }
  46. }
  47. }
  48. </script>
  49. <style>
  50. .margin-top-10 {
  51. margin-top: 10px;
  52. }
  53. .image {
  54. width: 196px;
  55. height: 196px;
  56. align-self: center;
  57. }
  58. </style>