前后端交互过程中—各类文件/图片的上传、下载、显示转换

图片

补充：

new Blob()

const blob = new Blob(blobParts, options);

URL.createObjectURL()

URL.createObjectURL() 是 Web API 中的一个方法，它可以将一个 Blob ——（二进制数据对象）、File ——用户文件（继承自 Blob） 或 MediaSource——（流媒体场景）对象转换为一个唯一的 URL。

这个 URL 的生命周期与创建它的文档绑定，并且通常用于在浏览器中临时引用一个本地文件或二进制数据。

基本用法：

• const objectURL = URL.createObjectURL(blob);
  blob：一个 Blob、File 或 MediaSource 对象。
  返回值：一个字符串，表示一个指向该对象的临时 URL。（格式为 blob:origin/unique-id）

内存管理​​ ：生成的 URL 会一直存在于内存中，直到文档被卸载（页面关闭）或手动撤销（URL.revokeObjectURL(objectURL)）。

​​URL 的生命周期​​：这个 URL 只在当前文档（document）中有效。如果导航到其他页面，这个 URL 就会失效。

​​安全性​​：生成的 URL 是 blob: 协议，其内容只能由创建它的页面访问，具有一定的安全性。

应用场景：

• 预览用户选择(上传时)的图片​​：
  当用户通过 < input type=“file” > 选择图片后，可以用 createObjectURL 生成一个 URL 并赋给 < img > 的 src，从而在不将图片上传到服务器的情况下预览图片。

<input type="file" id="upload" accept="image/*">
<img id="preview" src="#" alt="预览">

		const upload = document.getElementById('upload');const preview = document.getElementById('preview');upload.addEventListener('change', function(e) {const file = e.target.files[0];if (file) {// 为选中的文件创建临时URLconst objectURL = URL.createObjectURL(file);// 将img标签的src指向这个URLpreview.src = objectURL;// 在图片加载后（或者合适的时机）撤销URL，这里我们等待图片加载完成preview.onload = function() {URL.revokeObjectURL(objectURL);};}});

• 处理（下载）二进制数据​​：
  例如，下载由 JavaScript 生成的二进制数据（如 PDF、图片等），或在不使用服务器的情况下在页面中显示这些数据。

  	// 创建blob对象// 1.const response = await fetch('http://XXX');const blob = await response .blob();// 2.valueconst value= "Hello, world!";const blob2 = new Blob([value], {type: "text/plain"}); // image/png// 创建URL对象const url = URL.createObjectURL(blob);// 创建a标签......点击下载const a = document.createElement('a');a.href = url;a.download = 'example.txt';   // 设置下载文件名a.click();   // 触发下载setTimeout(() => URL.revokeObjectURL(url), 100);// 立即释放资源（不需要等待下载）

• ​​处理音视频流​​：（播放用户上传的视频）
  在 WebRTC 或媒体处理中，用于创建指向媒体流的 URL。

  	<input type="file" accept="video/*" id="video-upload"><video controls id="player"></video><script>document.getElementById('video-upload').addEventListener('change', (e) => {const file = e.target.files[0];if (file) {const video = document.getElementById('player');video.src = URL.createObjectURL(file);video.onload = () => URL.revokeObjectURL(video.src); // 清理}});</script>
  

替代方案：FileReader.readAsDataURL()​​

将文件转为 Base64 字符串（格式 data:[mime];base64,…），但​​不适合大文件​​（内存占用更高）。

有时候，我们也可以用 FileReader 来读取文件内容，例如：

const reader = new FileReader();
reader.onload = function(e) {preview.src = e.target.result;
};
reader.readAsDataURL(file);

readAsDataURL 会生成一个 Data URL（以 data: 开头的字符串），它包含了文件的全部内容（base64编码）。
这种方式不需要手动撤销URL，但文件较大时可能会占用更多内存。

对比：

tiff文件

说明：
由于tiff格式在浏览器中并不常见，且浏览器默认不支持直接显示tiff图片。
tiff文件在前端中不可以直接通过image标签显示，
因此我们需要借助第三方库来将tiff文件转换成png。

TIFF库

utif：一个轻量级的TIFF解析库
tiff.js：一个将TIFF图像转换为可显示格式的库

utif库轻量且简单，以下以utif库使用为例：

• 安装：

npm install utifnpm install tiff.js

• 使用：

import * as UTIF from 'utif';import { Tiff } from 'tiff.js';

注意：由于utif库处理的是TIFF文件的二进制数据，我们需要使用FileReader来读取文件。

• 注意事项：

1. 大文件处理​​：
   大尺寸 TIFF 文件可能导致内存问题
   考虑添加文件大小限制和加载提示
2. 服务器端替代方案​​：

   // 替代方案：使用服务器转换（如Node.js+Sharp）
   async serverConversion(file) {const formData = new FormData();formData.append('tiff', file);const response = await fetch('/api/convert', {method: 'POST',body: formData});return URL.createObjectURL(await response.blob());
   }
   

3. 浏览器兼容性​​：
   所有现代浏览器均支持
   IE11 需要 polyfill（推荐使用现代浏览器）
4. 安全性​​：
   上传时验证文件头确保是真实TIFF文件：

   const isValidTiff = buffer[0] === 0x49 && buffer[1] === 0x49;
   

此实现完全在客户端完成转换，无需服务器支持，适合中小型TIFF文件的转换需求。对于专业级应用（如医学影像），建议使用服务器端解决方案（如Python+pillow
或 Node.js+sharp）。

TIFF转换

通过url转换tiff文件为png

1. 获取在线的TIFF文件(通常是一个URL)​​：使用 Fetch API 获取远程 TIFF 文件的 ArrayBuffer
2. 解析TIFF​​：使用 如tiff.js 库解析二进制数据，获取图像信息
3. 将图像数据绘制到canvas上，Canvas转换​​：
   创建临时 Canvas 元素
   使用 toRGBA8() 方法获取像素数据
   通过 putImageData 绘制到 Canvas
4. 转换为PNG​​，使用canvas的toDataURL方法将其转换为PNG格式的数据URL：
   使用 canvas.toDataURL(‘image/png’) 获取 PNG 数据 URL
5. ​​显示和下载​​：
   通过 img 标签展示
   创建下载链接实现PNG下载

// 引入依赖
import * as UTIF from "utif";
// tiff文件URL转换_方法封装
const tiffUrlToPng = async (fileUrl) => {if (!fileUrl) {console.log("请输入TIFF文件URL");return;}// 自定义初始化工作let result = "";// this.isLoading = true;// this.error = null;// this.pngImage = null;// 使用 Fetch API 获取远程 TIFF 文件的 ArrayBufferawait fetch(fileUrl).then((response) => {if (!response.ok) {throw new Error("Network response was not ok");}return response.arrayBuffer();}).then((data) => {// 解析tiff数据const buffer = new Uint8Array(data);const ifds = UTIF.decode(buffer);// 获取第一帧（支持多帧TIFF）const firstPage = ifds[0];UTIF.decodeImage(buffer, ifds[0]);const rgba = UTIF.toRGBA8(firstPage);// 创建Canvasconst canvas = document.createElement("canvas");canvas.width = firstPage.width;canvas.height = firstPage.height;const ctx = canvas.getContext("2d");// 将图像数据放入Canvasconst imageData = new ImageData(new Uint8ClampedArray(rgba),canvas.width,canvas.height);ctx.putImageData(imageData, 0, 0);// 转换为PNG Data URL// resolve(canvas.toDataURL("image/png"));result = canvas.toDataURL("image/png");}).catch((error) => {console.error("Error:", error); // 处理错误});return result; //返回为promise对象。使用.then()方法获取结果。
};

utff.js使用（通过URL获取tiff文件转换）

<template><div><input type="text" v-model="tiffUrl" placeholder="输入TIFF文件URL"><button @click="convertToPng" :disabled="isLoading">转换为PNG</button><div v-if="isLoading">转换中...</div><img v-if="pngImage" :src="pngImage" alt="转换后的PNG" style="max-width: 100%"><div v-if="error" class="error">{{ error }}</div><button v-if="pngImage" @click="downloadPng">下载PNG</button></div>
</template><script>
import { Tiff } from 'tiff.js';export default {data() {return {tiffUrl: '',      // 存储输入的TIFF URLpngImage: null,   // 转换后的PNG数据URLisLoading: false, // 加载状态error: null       // 错误信息};},methods: {async convertToPng() {if (!this.tiffUrl) {this.error = '请输入TIFF文件URL';return;}this.isLoading = true;this.error = null;this.pngImage = null;try {// 1. 获取TIFF文件数据const response = await fetch(this.tiffUrl);if (!response.ok) throw new Error(`文件加载失败: ${response.status}`);const buffer = await response.arrayBuffer();// 2. 解析TIFFconst tiff = new Tiff({ buffer });const width = tiff.width();const height = tiff.height();// 3. 使用Canvas转换const canvas = document.createElement('canvas');canvas.width = width;canvas.height = height;const ctx = canvas.getContext('2d');// 获取TIFF像素数据并绘制到Canvasconst imageData = ctx.createImageData(width, height);imageData.data.set(tiff.toRGBA8()); // 转换为RGBA格式ctx.putImageData(imageData, 0, 0);// 4. 转换为PNGthis.pngImage = canvas.toDataURL('image/png');} catch (err) {console.error('转换失败:', err);this.error = `转换失败: ${err.message || '未知错误'}`;} finally {this.isLoading = false;}},// 下载转换后的PNGdownloadPng() {if (!this.pngImage) return;const link = document.createElement('a');link.href = this.pngImage;link.download = 'converted_image.png';document.body.appendChild(link);link.click();document.body.removeChild(link);}}
};
</script><style>
.error {color: red;margin-top: 10px;
}
</style>

通过文件选择的方式转换tiff文件为png

实现说明：
​​

1. 文件选择​​：
   • 使用 接受用户上传的 TIFF 文件
   • 设置 accept=“.tif,.tiff” 限制文件类型
2. ​​TIFF 转换核心流程​​：
   • 使用 FileReader 读取文件为 ArrayBuffer；
   • 通过 UTIF.decode() 解析 TIFF 文件结构；
   • 使用 UTIF.toRGBA8() 将 TIFF 转换为 RGBA 格式；
   • 使用 Canvas 将图像数据渲染为 PNG
3. 多帧支持​​：
   • ifds 数组包含 TIFF 的所有帧；
   • ifds[0] 获取第一帧（可根据需要循环处理多帧）
4. ​​下载功能​​：
   • 将 Canvas 生成的 Data URL 转换为可下载链接；
   • 通过动态创建 a 标签触发下载

<template><div><input type="file" @change="handleFileUpload" accept=".tif,.tiff"><div v-if="previewUrl"><img :src="previewUrl" alt="Converted PNG" style="max-width: 100%"><button @click="downloadPNG">下载PNG</button></div></div>
</template><script>
import * as UTIF from 'utif';export default {data() {return {previewUrl: null,convertedImage: null};},methods: {async handleFileUpload(event) {const file = event.target.files[0];if (!file) return;try {const pngDataUrl = await this.convertTiffToPng(file);this.previewUrl = pngDataUrl;} catch (error) {console.error('转换失败:', error);alert('文件转换失败，请确保是有效的TIFF文件');}},async convertTiffToPng(tiffFile) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = (e) => {try {// 解析TIFF数据const buffer = new Uint8Array(e.target.result);const ifds = UTIF.decode(buffer);UTIF.decodeImages(buffer, ifds);// 获取第一帧（支持多帧TIFF）const firstPage = ifds[0];const rgba = UTIF.toRGBA8(firstPage);// 创建Canvasconst canvas = document.createElement('canvas');canvas.width = firstPage.width;canvas.height = firstPage.height;const ctx = canvas.getContext('2d');// 将图像数据放入Canvasconst imageData = new ImageData(new Uint8ClampedArray(rgba),canvas.width,canvas.height);ctx.putImageData(imageData, 0, 0);// 转换为PNG Data URLresolve(canvas.toDataURL('image/png'));} catch (err) {reject(err);}};reader.onerror = reject;reader.readAsArrayBuffer(tiffFile);});},downloadPNG() {if (!this.previewUrl) return;const link = document.createElement('a');link.href = this.previewUrl;link.download = 'converted_image.png';document.body.appendChild(link);link.click();document.body.removeChild(link);}}
};
</script>

下载

普通图片文件png,jpg,jpeg,gif