Vue base64 附件点击下载

### 如何在 Vue2 中将 Base64 字符串转换为图片文件或显示图片 #### 创建 Blob 对象 为了处理图像数据，在 JavaScript 中可以创建一个 `Blob` 对象来表示不可变的原始数据。这可以通过解析 Base64 编码的数据 URI 来实现。 ```javascript function dataURItoBlob(dataURI) { const byteString = atob(dataURI.split(',')[1]); const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; const ab = new ArrayBuffer(byteString.length); const ia = new Uint8Array(ab); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], { type: mimeString }); } ``` 此方法接受一个包含 Base64 数据 URL 的参数，并返回一个新的 `Blob` 实例[^1]。 #### 使用 FormData 发送请求 一旦有了 `Blob` 对象，就可以利用 HTML5 提供的 `FormData` API 构建表单数据集以便提交给服务器： ```javascript const formData = new FormData(); formData.append('image', blobObject, 'filename.jpg'); axios.post('/upload-endpoint', formData).then(response => console.log(response)); ``` 这段代码片段展示了如何通过 Axios 库发送 POST 请求并将图片作为 multipart/form-data 形式的附件上传至指定端点。 #### 显示 Base64 图片 如果只是想要简单地展示一张由 Base64 编码构成的图片，则可以直接将其设置为 `<img>` 标签的 src 属性值: ```html <img :src="base64ImageString"/> ``` 这里的 `base64ImageString` 是存储着完整的 base64 编码字符串（包括前缀部分）的一个变量名称[^2]。 #### 完整示例：组件内集成上述功能 下面是一个简单的 Vue 组件例子，它接收 base64 字符串并通过计算属性动态生成 img 标记用于页面渲染；同时也提供了保存该图片的方法。 ```vue <template> <div> <!-- Display image --> <img v-if="imageDataUrl" :src="imageDataUrl"/> <!-- Button to trigger download --> <button @click="downloadImage">Download Image</button> </div> </template> <script> export default { props: ['base64'], computed: { imageDataUrl() { return this.base64; } }, methods: { async downloadImage() { try { let link = document.createElement('a'); link.href = await this.dataURItoBlob(this.imageDataUrl); link.download = "my-image.png"; link.click(); } catch(error){ alert(`Error downloading file ${error.message}`); } }, dataURItoBlob(dataURI) { // Implementation from above... } } }; </script> ``` 在此模板中，当用户点击按钮时会触发下载操作，而无需离开当前网页界面即可获取到对应的图片资源。