JavaScript 下载链接图片后上传的实现！
既然要进行图片上传，那么第一时间当然是判断是否为可下载的图片资源，有的时候可以使用正则表达式，但是很难判断是否可下载，当判断图片链接后是否有后缀的时候也比较苦恼，有的图片是没有后缀的，可是如果放开这个限制又比较容易被攻击，所以这里我们使用Image作为判断手法，若成功加载图片，那么说明确实为图片且可下载。
//判断链接是否指向图片且可下载
exportconstcheckImgExists=(imgurl:string)=>{
returnnewPromise(function(resolve,reject){
varImgObj=newImage();
ImgObj.src=imgurl;
ImgObj.onload=function(res){
resolve(res);
};
ImgObj.onerror=function(err){
reject(err);
};
});
};
//howtouseit
checkImgExists(imgLink)
.then(()=>{
//dosomethingwithimgLink
console.log(imgLink);
})
.catch((err)=>{
//somelogoralarm
console.log(err);
console.log("很抱歉,该链接无法获取图片");
});
判断好后，我们需要对这个图片进行下载，这里我们使用XMLHttpRequest进行请求下载，下载后会是一个Blob对象。
Blob本身可以转化成FormData对象或者是File对象，我们可以根据自己项目的具体情况去选择上传策略，如果想传到OSS上，可以选择转化为File对象，若是传输到自己的服务器上，可以使用Ajax，并转Blob为FormData进行上传。
//将图片链接中的图片进行XMLHttpRequest请求，返回Blob对象
functiongetImageBlob(url:string){
returnnewPromise(function(resolve,reject){
varxhr=newXMLHttpRequest();
xhr.open("get",url,true);
xhr.responseType="blob";
xhr.onload=function(){
if(this.status==200){
resolve(this.response);
}
};
xhr.onerror=reject;
xhr.send();
});
}
//将Blob对象转为File对象
constblobToFile=(blob:Blob,fileName:string)=>{
returnnewwindow.File([blob],fileName,{type:blob.type});
};
//howtouseit
//返回一个File对象，可使用该File对象进行上传操作
getImageBlob(src).then(async(res:any)=>{
constsrcSplit=src.split("/");
constfilename=srcSplit[srcSplit.length-1];
returnblobToFile(res,filename);
});
接下来是一个上传OSS的小演示，由于OSS涉及的隐私信息较多，所以建议大家把accessKeyId、accessKeySecret等信息用接口去获取，甚至使用临时的钥匙等。
importOSSfrom"ali-oss";
constERROR_TIP="上传失败！";
/**
*File上传OSS的示例
*相关accessKeyId、bucket等参数需要根据你的OSS库进行填写
*建议将【accessKeyId，accessKeySecret】这两个敏感信息做成接口获取或者加密
*/
exportconstuploadToOSS=async(
fileName:string,
file:File,
accessKeyId:string,
accessKeySecret:string,
...props
)=>{
letclient=newOSS({
endpoint,//你申请好的oss项目地址
bucket,//OSS对象载体
accessKeyId,//youraccessKeyIdwithOSS
accessKeySecret,//youraccessKeySecretwithOSS
internal:true,
...props,
});
constputResult=awaitclient.put(fileName,file,{
timeout:60*1000*2,
});
if(putResult.res.status===200){
return{url:putResult.url,fileName};
}
thrownewError(ERROR_TIP);
};
当然如果想上传图片到你自己的服务器，可以选择将Blob格式的文件转为FormData格式，使用XMLHttpRequest或者Ajax进行图片的上传
//将Blob对象转为FormData对象
constblobToFormData=(blob:Blob,fileName:string)=>{
constformdata=newFormData();
formdata.append("file",blob,fileName);
returnformdata;
};
//XMLHttpRequest
constuploadFile=(formData:FormData)=>{
consturl="your_interface";
letxhr=newXMLHttpRequest();
xhr.onload=function(){
console.log("ok");
console.log(JSON.parse(xhr.responseText));
};
xhr.onerror=function(){
console.log("fail");
};
xhr.open("post",url,true);
xhr.send(formData);
};
//Ajax
constuploadFile2=(formData:FormData)=>{
consturl="your_interface";
$.ajax({
url,
type:"POST",
data:formData,
async:false,
cache:false,
contentType:false,
processData:false,
success:function(returndata){
console.log(returndata);
},
error:function(returndata){
console.log(returndata);
},
});
};
在之前我的后端项目中，使用了Express作为静态图片库，以下是我的node上传图片代码。值得注意的是，使用formidable解析后，jpg文件会直接在你的预设照片目录有一个很长的随机名称，这边其实我也是使用了较短的名称进行重命名，大家可以根据自己的需要选择重命名策略。
constexpress=require("express");
constlistenNumber=5000;
constapp=express();
constbodyParser=require("body-parser");
consthttp=require("http");//创建服务器的
constformidable=require("formidable");
constpath=require("path");
constfs=require("fs");
app.use(express.static("../../upload"));
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());//数据JSON类型
//上传图片
app.post("/upLoadArticlePicture",(req,res,next)=>{
letdefaultPath="../../upload/";
letuploadDir=path.join(__dirname,defaultPath);
letform=newformidable.IncomingForm();
letgetRandomID=()=>
Number(Math.random().toString().substr(4,10)+Date.now()).toString(36);
form.uploadDir=uploadDir;//设置上传文件的缓存目录
form.encoding="utf-8";//设置编辑
form.keepExtensions=true;//保留后缀
form.maxFieldsSize=2*1024*1024;//文件大小
form.parse(req,function(err,fields,files){
if(err){
res.locals.error=err;
res.render("index",{title:TITLE});
return;
}
letfilePath=files.file["path"];
letbackName=filePath.split(".")[1];
letoldPath=filePath.split("\\")[filePath.split("\\").length-1];
letnewPath=`${getRandomID()}.${backName}`;
fs.rename(defaultPath+oldPath,defaultPath+newPath,(err)=>{
if(!err){
newPath=`http://localhost:${listenNumber}/${newPath}`;
res.json({flag:true,path:newPath});
}else{
res.json({flag:false,path:""});
}
});
});
});
到此这篇关于JavaScript下载链接图片后上传的实现的文章就介绍到这了,更多相关JavaScript下载链接图片后上传内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。