需求分析

由于需求，需要将前端用户上传的图片保存到CDN节点上面，这个时候可以使用图床进行完成。

操作步骤

贴图库注册 www.tietuku.com/
创建相册
生成token
编写上传代码

token生成

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://up.imgapi.com/">

        <input type="file" name="fileurl" id="fileImg">
        <input type="button" id="submitUp" value="点击上传">
    </form>

</body>
<script>
    document.getElementById('submitUp').onclick = function () {
        var formData = new FormData();

        formData.append("Token", "401092834ae6b2b8d07918a7364fb16aacde7742:b29ozwLP2zxDwD0YvFvalKbU4qY=:eyJkZWFkbGluZSI6MTU2NDcyOTk5NiwiYWN0aW9uIjoiZ2V0IiwidWlkIjoiNjk1OTEzIiwiYWlkIjoiMTYyMDAxNSIsImZyb20iOiJmaWxlIn0=");

        // 这里上传的方式为 点击文件，二进制文件上传
        var file = document.getElementById('fileImg').files[0];
        formData.append("file", file);
        
        // 注意：这里上传的方式为url地址上传
        // var fileUrl = 'https://www.baidu.com/img/bd_logo1.png?where=super';
        // formData.append("fileurl", fileUrl);
        
        
        var request = new XMLHttpRequest();
        request.open("POST", "http://up.imgapi.com/");
        request.send(formData);

    }

</script>

</html>

注意事项

在贴图库上传的图片，默认只能保存七天，如果需要保存更久，则需要开通相应的套餐即可。

贴图库-图床技术

需求分析

操作步骤

token生成

代码演示

注意事项