使用data_url预览图片

在 Vue 中使用 `window.URL.createObjectURL` 来预览图片是一个常见需求，尤其是在处理本地上传的文件或从后端获取的 Blob 数据时。该方法可以将 Blob 或 File 对象转换为一个临时的 URL，从而允许浏览器直接在 `<img>` 标签中显示图像。 以下是一个典型的实现方式： ### 图片预览实现 假设用户选择了一个本地图片文件，并希望在不上传到服务器的情况下立即预览该图片。 #### HTML 模板部分 ```vue <template> <div> <input type="file" @change="previewImage" accept="image/*" /> <img :src="imagePreview" alt="预览图" v-if="imagePreview" style="max-width: 100%; margin-top: 20px;" /> </div> </template> ``` #### Vue 脚本部分 ```vue <script> export default { data() { return { imagePreview: null, }; }, methods: { previewImage(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { this.imagePreview = e.target.result; }; reader.readAsDataURL(file); } }, }, }; </script> ``` 上述代码使用了 `FileReader` 来读取文件内容并将其转换为 Data URL，这种方式适用于小文件预览。 如果你需要通过 `window.URL.createObjectURL` 来实现相同的功能（更适用于大文件），可以修改 `previewImage` 方法如下： ```vue previewImage(event) { const file = event.target.files[0]; if (file) { const blobURL = window.URL.createObjectURL(file); this.imagePreview = blobURL; // 可选：在组件销毁前释放对象 URL 以避免内存泄漏 this.$once('hook:beforeDestroy', () => { window.URL.revokeObjectURL(blobURL); }); } } ``` 这样就可以直接通过创建的对象 URL 显示图片，而无需将整个文件数据编码为 Base64 字符串。 ### 结合 Axios 获取 Blob 数据进行预览 如果图片是从服务器获取的 Blob 数据，例如通过 Axios 请求获得，则可以参考引用[^2]中的思路： ```javascript axios.get('/api/photo', { responseType: 'blob' }).then(response => { const blob = new Blob([response.data], { type: 'image/jpeg' }); const url = window.URL.createObjectURL(blob); this.imagePreview = url; }); ``` ### 注意事项 - 使用 `window.URL.createObjectURL` 创建的链接不会自动释放，应尽量在不再需要时调用 `window.URL.revokeObjectURL()` 以释放内存。 - 如果是通过 `<input type="file">` 获取的本地文件，由于安全限制，不能直接将 `File` 对象作为 `src` 设置给 `<img>`，必须通过 `FileReader` 或 `createObjectURL` 转换后使用。