🔥前端开发,文件流保存成文件并下载

前言

今天写一篇文章,题目为"文件流保存成图片"
前期准备: vue3、ant-design-vue4

代码部分:

次要代码

template:

script:

主要代码

第一种办法 canvas

利用canvas把图片的url搞出来,然后通过一个a标签点击下载

js 复制代码
const handleChange = async (info) => {
  // 假设fileStream是一个文件流对象

  // 创建一个Image对象
  const image = new Image();

  // 当Image对象加载完成后执行回调函数
  image.onload = function () {
    // 创建一个Canvas元素
    const canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;

    // 将文件流绘制到Canvas上
    const context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);

    // 将Canvas转换为DataURL
    const dataURL = canvas.toDataURL("image/png");

    // 创建一个下载链接
    const a = document.createElement("a");
    a.href = dataURL;
    a.download = "image.png";
    document.body.appendChild(a);

    // 触发下载链接
    a.click();

    // 清理下载链接
    document.body.removeChild(a);
  };

  // 将文件流设置为Image对象的src属性
  // 文件流: info.file.originFileObj
  image.src = URL.createObjectURL(info.file.originFileObj);
};

第二种办法 文件流转base64

这篇文章讲解了各种格式互相转换的方法,可以酌情按需看看。

图片的文件流转成图片的base64 URL,然后也是通过a标签点击下载

js 复制代码
/**
 * file转base64
 * @param file       {File}    文件
 * @returns promise  {Promise} 返回base64
 */
 
const fileToBase64 = (file) => {
    return new Promise((resolve, reject) => {
        
        // 使用FileReader对象异步读取文件的内容
        const reader = new FileReader()
        let readerResult = ''
        
        // 开始读取
        reader.readAsDataURL(file)
        
        // 操作完成时触发
        reader.onload = function () {
            readerResult = reader.result
        }
        
        // 读取操作发生错误时触发
        reader.onerror = function (error) {
            reject(error)
        }
        
        // 读取操作结束时触发(要么成功、要么失败)
        reader.onloadend = function () {
            resolve(readerResult)
        }
    })
}

// 文件流通过a标签点击下载图片

ini 复制代码
const handleChange = async (info) => {
  const base64Url = await fileToBase64(info.file.originFileObj);
  console.log(base64Url);

  // 创建一个下载链接
  const a = document.createElement("a");
  a.href = base64Url;
  a.download = "image.png";
  document.body.appendChild(a);

  // 触发下载链接
  a.click();

  // 清理下载链接
  document.body.removeChild(a);
};

效果

如下图:

总结

以上就是将文件流转化成图片,然后进行模拟点击下载链接来保存一些文件(图片、word、pdf等等)。

☎️ 希望对大家有所帮助,如有错误,望不吝赐教,欢迎评论区留言互相学习。感谢阅读!

相关推荐
coder_pig21 分钟前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少27 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder29 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix40 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句40 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易40 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端