Vue二进制流转为base64编码渲染界面,并保存到手机相册_vue 微信公众号 保存base64到移动端相册

效果图

可直接复用,接口地址换自己的

<template>
  <div>
    <div class="box">
      <img :src="sss" alt="" />
      <button @click="ermxz">保存二维码</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: "",
      srcc: "data:image/png;base64,",
      sss: "",
      number: "",
    };
  },
  mounted() {
    this.erm();
  },
  methods: {
    //转格式并渲染到界面
    erm() {
      let token = wx.getStorageSync("authToken");   //获取token
      var that = this;
      wx.request({
        url: "接口地址", 
        method: "get",
        header: {
          Hrsyabc: token,
        },
        responseType: "arraybuffer", //此处是请求文件流，必须带入的属性
        success(res) {
          if (res.statusCode === 200) {
            var imgSrc = wx.arrayBufferToBase64(res.data); //二进制流转为base64编码
            (that.imgSrc = imgSrc), (that.sss = that.srcc + that.imgSrc);
            var save = wx.getFileSystemManager();
            var number = Math.random();
            that.number = number;
            save.writeFile({
              filePath: wx.env.USER_DATA_PATH + "/pic" + number + ".png",
              data: imgSrc,
              encoding: "base64",
              success: (res) => {
                console.log(that.srcc);
              },
              fail: (err) => {
                console.log(err);
              },
            });
          }
        },
        fail: function (error) {
          console.log(error);
        },
      });
    },
    //点击保存到手机相册
    ermxz() {
      wx.saveImageToPhotosAlbum({
        //保存为png格式到相册
        filePath: wx.env.USER_DATA_PATH + "/pic" + this.number + ".png",
        success: function (res) {
          wx.showToast({
            title: "下载成功",
            icon: "none",
            duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
          });
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
  },
};
</script>

<style>
.box {
  width: 300px;
  height: 300px;
}
.box img {
  width: 100%;
  height: 100%;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91