欢迎光临
我们一直在努力

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

> 获得复制的图片,但是并没有做到上传,所以,今天就做上传。

## Start

先新建一个页面

由于粘贴上传的操作都是在JavaScript里面完成的,所以只需要写JavaScript即可

对了,由于上传需要进行Ajax所以我们导入jquery。

### 导入jquery

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

复制代码

### 全局粘贴事件

先写事件:

%title插图%num

  1. <body>
  2.     // 1.导入jquery
  3.     <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
  4.     //写JavaScript
  5.     <script>
  6.     //2.写全局粘贴事件
  7.     $(‘html’).on(‘paste’, function () {
  8.     });
  9.     </script>
  10. </body>

复制代码

### 获取文件并打印

然后在写获取文件并打印。

%title插图%num

  1. <body>
  2.     // 1.导入jquery
  3.     <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
  4.     //写JavaScript
  5.     <script>
  6.     //2.写全局粘贴事件
  7.     $(‘html’).on(‘paste’, function (e) {
  8.     //3.获取文件并打印
  9.         var fil = event.clipboardData.items[0].getAsFile();
  10.         console.log(fil);
  11.     });
  12.     </script>
  13. </body>

复制代码

%title插图%num

### 新建构造函数

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

%title插图%num

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

复制代码

### 发起Ajax请求上传

然后发起Ajax请求上传文件

%title插图%num

  1.     // 1.导入jquery
  2.     <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
  3.     //写JavaScript
  4.     <script>
  5.     //2.写全局粘贴事件
  6.     $(‘html’).on(‘paste’, function (e) {
  7.     //3.获取文件并打印
  8.         var fil = event.clipboardData.items[0].getAsFile();
  9.         console.log(fil);
  10.     //4.新建构造函数,存到data中
  11.         var data = new FormData();
  12.     //4.1把 fil 放到 data 里面去
  13.         data.append(“image”,fil);
  14.     //5. 发起Ajax请求上传文件
  15.         $.ajax({
  16.             method: ‘POST’,// 请求类型 POST
  17.             url: ‘https://ddp.ink/api/upload’, // api 地址
  18.             data: data, //data是存的图片数据
  19.             dataType: “json”,//服务器返回类型为 json
  20.             //contentType 内容的编码类型。为 false 时将不设置 Content-Type。
  21.             contentType: false,
  22.             //processData 是否把传递进来的数据转换成查询字符串发送 设置false 否。
  23.             processData: false,
  24.             //success 成功返回
  25.             success: function (response) {
  26.                 //打印成功后返回的数据
  27.                 console.log(response);
  28.             }
  29.         });
  30.     });
  31.     </script>

复制代码

`contentType`需要设置为`false` 因为不需要设置 `contentType`

`processData`需要设置为`false` 因为不需要转换

然后打印一下成功后返回的数据:

%title插图%num

准确无误。

修改一下log的打印数据

%title插图%num

%title插图%num

顺利拿到链接。基本就结束了,下面贴上文件方便下载。

## 下载链接

[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

赞(0)
未经允许不得转载:阿强爱分享 » 教你怎么用图床Api做个属于自己的图床

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址