图片URL转file文件(前端+后端node.js)

简介: 图片URL转file文件(前端+后端node.js)

需求:
主要是想自动化的根据图片url上传一张全新的图片到我们的服务器

正常手动操作,就是需要把这个图片根据url 下载下来

然后去手动的上传 然后上传成功。

但是如果让脚本去执行这个操作呢?

前端
第一步:

先把图片的url转为blob文件

关键代码: let imgFile = new File([blob], imageName, { type: "image/jpeg" });

// 选择默认图片
function chooseStaticImg(imageUrl) {
  getImageFileFromUrl(imageUrl, "图片.png", function (file) {
    // file = file; //获取file对象
    console.log(file);
  });
}
// 根据路径返回file
function getImageFileFromUrl(url, imageName, callback) {
  fetch(url)
    .then((res) => {
      return res.blob();
    })
    .then((blob) => {
      let imgFile = new File([blob], imageName, { type: "image/jpeg" });
      callback(imgFile);
    });
}
chooseStaticImg("http://biaoblog.run:3000/uploads/1615366772320.png");
AI 代码解读

复制代码
如果请求文件用的axios可以这样:效果相同

 axios.get(url).then((res) => {
    let imgFile = new File([res.data], imageName, { type: "image/jpeg" });
    callback(imgFile);
  });
AI 代码解读

复制代码
第二步:

把已经转成功的文件 上传到我们的服务器就完事了

// 上传到我们自己的服务器
function uploadFile(file) {
  var formData = new FormData();
  formData.append("file", file);
  console.log(formData.get("file"));
  fetch("http://localhost:3000/blogData/upload", {
    method: "POST",
    body: formData,
  // headers: {
    // //不需要写'Content-Type': 'multipart/form-data',自动是form -data 写了报错!离谱!
    // 'Content-Type': 'multipart/form-data',
    // },
  })
    .then((res) => {
      return res.json();
    })
    .then((res) => {
      console.log(res);
    });
}
AI 代码解读

复制代码

后端使用node.js
经过操作,发现上面说的第一种方法 依赖于new File 也就是前端的方法

但是在node环境中 没有这样直接生成file的方法怎么办呢?

答案是通过fs.readfile

首先放弃一种用户传递file这种方式 单独写个接口来处理

下面是方法.

主要是通过axios去请求这个图片的url,可以指定返回的数据格式为:arraybuffer

然后writeFile是直接buffer的 ,直接指定路径写入就可以了,实现了我们的需求,不需要依赖于前端的file对象了

封装了一层promise来处理异步,compressImg方法是我们压缩图片的方法 如果需要可以参考:http://biaoblog.cn/info?id=1661684128265

不需要可以忽略,

当时还是很纠结node该如何转成前端那种file再去调用我们之前的upload方法,后来想通了

不一样非要用一样的方法,只要能达到我们的效果即可!

我们遇到的问题 别人的描述:https://cnodejs.org/topic/60c31420248d04610b4acab0
const saveCrawlerImg = async (dataSrc) => {
console.log(dataSrc);
let files = {

detailSrc: "",
coverSrc: "",
AI 代码解读

};

return new Promise((resolve) => {

axios
  .get(dataSrc, {
    responseType: "arraybuffer",
  })
  .then(async (res) => {
    let filename = Date.now() + ".jpg";
    fs.writeFile("./public/uploads/" + filename, res.data, async (err) => {
      if (err) {
        console.log(err);
      } else {
        files.detailSrc = IPAddress + "/uploads/" + filename;
        let coverName = filename.split(".")[0] + "_cover";
        await compressImg(
          `./public/uploads/${filename}`,
          coverName,
          "public/uploads/compress"
        );
        files.coverSrc =
          IPAddress + "/uploads/compress/" + coverName + ".jpg";
        resolve(files);
      }
    });
  });
AI 代码解读

});
};
复制代码
作者: Bill 本文地址: http://biaoblog.cn/info?id=1661512856065

版权声明: 本文为原创文章,版权归 biaoblog 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

相关文章
深入浅出Node.js: 打造高效后端服务
【10月更文挑战第39天】在数字化浪潮中,后端开发作为支撑现代Web应用的骨架,扮演着不可或缺的角色。Node.js,作为一种流行的服务器端JavaScript运行环境,因其非阻塞I/O和事件驱动的特性,被广泛应用于构建轻量且高效的后端服务。本文旨在通过浅显易懂的语言,结合生动的比喻和实际代码案例,带领读者深入理解Node.js的核心概念、架构设计及其在后端开发中的应用,进而掌握如何使用Node.js搭建稳定、可扩展的后端服务。无论你是初探后端开发的新手,还是寻求进阶的开发者,这篇文章都将为你提供有价值的指导和启示。
深入浅出Node.js:从零开始构建后端服务
【10月更文挑战第42天】在数字时代的浪潮中,掌握一门后端技术对于开发者来说至关重要。Node.js,作为一种基于Chrome V8引擎的JavaScript运行环境,允许开发者使用JavaScript编写服务器端代码,极大地拓宽了前端开发者的技能边界。本文将从Node.js的基础概念讲起,逐步引导读者理解其事件驱动、非阻塞I/O模型的核心原理,并指导如何在实战中应用这些知识构建高效、可扩展的后端服务。通过深入浅出的方式,我们将一起探索Node.js的魅力和潜力,解锁更多可能。
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
76 1
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
48 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
56 10
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等