[网站源码] 教你怎么用图床Api做个属于自己的图床



[网站源码] 教你怎么用图床Api做个属于自己的图床

特别声明:本站资源分别为免费资源、查看密码或解压密码资源、三个级别VIP会员资源。本站所有发布的内容都是安全,请放心下载!本站不可能所有资源都可以商业用途,原创或部分除外!如:商业用途请联系原作者购买正版。与本站无关!若侵犯到您的权益,请联系本站删除,我们将及时处理!

分享

> 昨天的文章,我们只做到了:
>
> 获得复制的图片,但是并没有做到上传,所以,今天就做上传。

## Start

先新建一个页面

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

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

### 导入jquery


  1.     <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>
> 昨天的文章,我们只做到了:
>
> 获得复制的图片,但是并没有做到上传,所以,今天就做上传。

## Start

先新建一个页面

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

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

### 导入jquery


  1.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
复制代码


### 全局粘贴事件

先写事件:



  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.     });
  10.     </script>
  11. </body>
复制代码

### 获取文件并打印

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



  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.     });
  13.     </script>
  14. </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了。

分享到:
打赏
未经允许不得转载:

作者: cj13888, 转载或复制请以 超链接形式 并注明出处 易启发资源网
原文地址: 《[网站源码] 教你怎么用图床Api做个属于自己的图床》 发布于2021-11-20

评论


切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

[网站源码] 教你怎么用图床Api做个属于自己的图床

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏