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

聪明小米

> 昨天的文章，我们只做到了：
>
> 获得复制的图片，但是并没有做到上传，所以，今天就做上传。
## Start
先新建一个页面
由于粘贴上传的草作都是在JavaScript里面完成的，所以只需要写JavaScript即可
对了，由于上传需要进行Ajax所以我们导入jquery。
### 导入jquery

• <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  

复制代码
### 全局粘贴事件
先写事件：

• <body>
  // 1.导入jquery
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  //写JavaScript
  <script>
  //2.写全局粘贴事件
  $('html').on('paste', function () {
  });
  </script>
  </body>
  

复制代码
### 获取文件并打印
然后在写获取文件并打印。

• <body>
  // 1.导入jquery
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  //写JavaScript
  <script>
  //2.写全局粘贴事件
  $('html').on('paste', function (e) {
  //3.获取文件并打印
  var fil = event.clipboardData.items[0].getAsFile();
  console.log(fil);
  });
  </script>
  </body>
  

复制代码
### 新建构造函数
未出现问题，然后就是上传了，新建构造函数`FormData`并把获取到的文件放进去:

• // 1.导入jquery
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  //写JavaScript
  <script>
  //2.写全局粘贴事件
  $('html').on('paste', function (e) {
  //3.获取文件并打印
  var fil = event.clipboardData.items[0].getAsFile();
  console.log(fil);
  //4.新建构造函数,存到data中
  var data = new FormData();
  //4.1把 fil 放到 data 里面去
  data.append("image",fil);
  });
  </script>
  

复制代码
### 发起Ajax请求上传
然后发起Ajax请求上传文件

• // 1.导入jquery
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  //写JavaScript
  <script>
  //2.写全局粘贴事件
  $('html').on('paste', function (e) {
  //3.获取文件并打印
  var fil = event.clipboardData.items[0].getAsFile();
  console.log(fil);
  //4.新建构造函数,存到data中
  var data = new FormData();
  //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的打印数据
顺利拿到链接。基本就结束了，下面贴上文件方便下载。
## 下载链接
[https://library.4z1.cn/Program/test.html.zip](https://library.4z1.cn/Program/test.html.zip)
在线演示地址：
https://www.4z1.cn/dp/Nice_Pic_Test.html
(F12打开控制台查看)
当然，这边还做了个美化版的Api上传
https://www.4z1.cn/dp/Nice_PicApiDemo.html
我很早大概花了 3天把jquery过了遍脑，也实草了不少，没想到败在了个上传文件上面，属于是过分自大了，把整个流程记录下来警醒自己，就好安心肝Vue了。

超级小爱

这个流程本身没错，坑主要在前两步抓数据的地方，我按你文章的代码指出几处：

• 你写的是 function (e)，里面却用 event.clipboardData。Chrome 里靠全局 event 侥幸能跑，但标准写法应该是 e.clipboardData，别的浏览器或者严格模式就翻车。
  
• items[0].getAsFile() 太想当然——粘贴纯文本时第 0 項是字符串，拿到的就是 null，后面 append 直接报错。应该遍历 items，挑 kind 为 file 的那一項。
  
• 顺手加个空值判断，不然用户随便粘段文字控制台就红一片。
  

改完大概这样：

$('html').on('paste', function (e) {
var items = e.clipboardData.items, fil = null;
for (var i = 0; i < items.length; i++) {
if (items.kind === 'file') { fil = items.getAsFile(); break; }
}
if (!fil) return;
var data = new FormData();
data.append('image', fil);
$.ajax({
method: 'POST',
url: 'ddp.ink',
data: data,
dataType: 'json',
contentType: false,
processData: false,
success: function (res) { console.log(res); }
});
});

另外两个提醒：FormData 的字段名 image 必须和接口文档一致，写错接口会收不到文件；拿到链接后建议直接插个 img 预览，比只看控制台直观。

contentType 和 processData 那两处你解释得对，jQuery 默认会帮你转字符串、设请求头，传 FormData 就得关掉，这块没毛病。三天过完 jQuery 卡在上传上不丢人，这坑谁都踩过。
以上内容由论坛 AI 助手自动生成，仅供参考。