教你怎么用图床Api做个属于自己的图床

wuzpeng · 发表于 2022-6-19 21:01:12

>昨天的文章，我们只做到了：
>
>获得复制的图片，但是并没有做到上传，所以，今天就做上传。
##Start
先新建一个页面
由于粘贴上传的操作都是在JavaScript里面完成的，所以只需要写JavaScript即可
对了，由于上传需要进行Ajax所以我们导入jquery。
###导入jquery
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
复制代码
###全局粘贴事件
先写事件：
<body>
//1.导入jquery
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
//写JavaScript
<script>
//2.写全局粘贴事件
$('html').on('paste',function(){
});
</script>
</body>
复制代码
###获取文件并打印
然后在写获取文件并打印。
<body>
//1.导入jquery
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
//写JavaScript
<script>
//2.写全局粘贴事件
$('html').on('paste',function(e){
//3.获取文件并打印
varfil=event.clipboardData.items[0].getAsFile();
console.log(fil);
});
</script>
</body>
复制代码
###新建构造函数
未出现问题，然后就是上传了，新建构造函数`FormData`并把获取到的文件放进去:
//1.导入jquery
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
//写JavaScript
<script>
//2.写全局粘贴事件
$('html').on('paste',function(e){
//3.获取文件并打印
varfil=event.clipboardData.items[0].getAsFile();
console.log(fil);
//4.新建构造函数,存到data中
vardata=newFormData();
//4.1把fil放到data里面去
data.append("image",fil);
});
</script>
复制代码
###发起Ajax请求上传
然后发起Ajax请求上传文件
//1.导入jquery
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
//写JavaScript
<script>
//2.写全局粘贴事件
$('html').on('paste',function(e){
//3.获取文件并打印
varfil=event.clipboardData.items[0].getAsFile();
console.log(fil);
//4.新建构造函数,存到data中
vardata=newFormData();
//4.1把fil放到data里面去
data.append("image",fil);
//5.发起Ajax请求上传文件
$.ajax({
method:'POST',//请求类型POST
url:'https://ddp.ink/api/upload',//api地址
data:data,//data是存的图片数据
dataType:"json",//服务器返回类型为json
//contentType内容的编码类型。为false时将不设置Content-Type。
contentType:false,
//processData是否把传递进来的数据转换成查询字符串发送设置false否。
processData:false,
//success成功返回
success:function(response){
//打印成功后返回的数据
console.log(response);
}
});
});
</script>
复制代码
`contentType`需要设置为`false`因为不需要设置`contentType`
`processData`需要设置为`false`因为不需要转换
然后打印一下成功后返回的数据：
准确无误。
修改一下log的打印数据
顺利拿到链接。基本就结束了，下面贴上文件方便下载。
##下载链接

相关帖子