需求：
主要是想自动化的根据图片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 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
