VueJS 解码 base64 html 字符串

Question

为了能够为可上传的 HTML 文件实现实时预览，我需要帮助解码 base64 字符串。

当我将文件传递给输入元素并使用 读取它时FileReader()，我得到一个 base64 编码的字符串。

我需要做什么才能将其转换为 HTML/TXT？

我已经找到了一些关于解码图片的东西，不幸的是这对我没有帮助。

handleFileUpload() {
          this.file = this.$refs.file.files[0];
          let reader = new FileReader();

          reader.addEventListener("load", function() {
            this.html = atob(reader.result);
          }.bind(this), false);

          reader.readAsDataURL(this.file);
        },

输出：

data:text/html;base64,PGh0bWwgeG1sbnM6dj0idXJuOnNjaGVtYXMtbWljcm9zb2Z0LWNvbTp2bWwiDQp4bWxuczpvPSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTpvZmZpY2UiDQp4bWxuczp4PSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTpleGNlbCINCnhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy9UUi9SRUMtaHRtbDQwIj4NCg0KPGhlYWQ+DQo8bWV0YSBodHRwLWVxdWl2PUNvbnRlbnQtVHlwZSBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9d2luZG93cy0xMjUyIj4NCjxtZXRhIG5hbWU9UHJvZ0lkIGNvbnRlbnQ9RXhjZWwuU2hlZXQ+DQo8bWV0YSBuYW1lPUdlbmVyYXRvciBjb250ZW50PSJNaWNyb3NvZnQgRXhjZWwgMTUiPg0KPGxpbmsgaWQ9TWFpbi1GaWxlIHJlbD1NY......

Answer 1

readAsDataURL您应该使用 ，而不是readAsText，以便获得文本而不是斑点。

handleFileUpload() {
          this.file = this.$refs.file.files[0];
          let reader = new FileReader();

          reader.addEventListener("load", function() {
            this.html = reader.result;
          }.bind(this), false);

          reader.readAsText(this.file);
        },