图片URL转file文件
图片URL转file文件
biaoblog.cn 个人博客
发布于 2022-08-28 14:08:13
发布于 2022-08-28 14:08:13
需求：主要是想自动化的根据图片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");第二步：
把已经转成功的文件 上传到我们的服务器就完事了
????//?上传到我们自己的服务器
????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);
????????});
????}本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读