图片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");

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

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

复制代码
第二步：

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

// 上传到我们自己的服务器
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);
    });
}

复制代码

后端使用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: "",

};

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);
      }
    });
  });

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

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