当前位置： 首页 > article >正文

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

article 2025/8/18 15:35:05

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

  • 图片
    • 补充：
      • new Blob()
      • URL.createObjectURL()
      • 替代方案：FileReader.readAsDataURL()​​
      • 对比：
    • tiff文件
      • TIFF库
      • TIFF转换
        • 通过url转换tiff文件为png
        • 通过文件选择的方式转换tiff文件为png
    • 下载
    • 普通图片文件png,jpg,jpeg,gif

图片

补充：

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

http://www.lryc.cn/news/2403843.html

相关文章：

  • SparkSQL 优化实操
  • 【vLLM 学习】Cpu Offload Lmcache
  • 数据库同步是什么意思？数据库架构有哪些？
  • 【数据结构】详解算法复杂度：时间复杂度和空间复杂度
  • Rest-Assured API 测试：基于 Java 和 TestNG 的接口自动化测试
  • 多模型协同：基于 SAM 分割 + YOLO 检测 + ResNet 分类的工业开关状态实时监控方案
  • 【分销系统商城】
  • LangChainGo入门指南：Go语言实现与OpenAI/Qwen模型集成实战
  • 5.1 HarmonyOS NEXT系统级性能调优：内核调度、I/O优化与多线程管理实战
  • react public/index.html文件使用env里面的变量
  • chili3d 笔记17 c++ 编译hlr 带隐藏线工程图
  • 创建一个纯直线组成的字体库
  • 接口不是json的内容能用Jsonpath获取吗，如果不能，我们选用什么方法处理呢？
  • 使用 Docker Compose 从零部署 TeamCity + PostgreSQL（详细新手教程）
  • Go 语言实现高性能 EventBus 事件总线系统（含网络通信、微服务、并发异步实战）
  • Linux进程（中）
  • 【计算机组成原理】计算机硬件的基本组成、详细结构、工作原理
  • npm error Cannot read properties of null (reading ‘matches‘)
  • MVC分层架构模式深入剖析
  • 【方案分享】蓝牙Beacon定位精度优化（包含KF、EKF与UKF卡尔曼滤波算法详解）
  • 新能源汽车热管理核心技术解析：冬季续航提升40%的行业方案
  • LeetCode 239. 滑动窗口最大值(单调队列)
  • 华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1开通指南及使用心得
  • 鸿蒙图片缓存（一）
  • 运行示例程序和一些基本操作
  • 学习数字孪生，为你的职业发展开辟新赛道
  • WebRTC源码线程-1
  • python学习打卡day47
  • MySQL中的内置函数
  • Ansible自动化运维全解析：从设计哲学到实战演进