免费！有道云笔记上传图片方式全解析

前端

2024-01-07 17:42:19

用有道云笔记记录学习笔记，经常遇到图片上传的问题。

使用有道云笔记时，非会员上传图片时会遇到限制，但我们可以通过自定义上传按钮与后端 API 交互来绕过这一限制。

突破上传限制

1. 自定义上传按钮

在「Markdown 笔记」原有的上传图片弹窗中增加一个自定义上传按钮。

2. 后端 API 交互

通过直接与后端 API 交互完成图片上传。

3. 相关 API

笔记上传时公开使用的 API。

步骤详解

1. 获取 API 地址

打开 Chrome 浏览器的开发者工具，在「网络」选项卡中输入「upload」，找到图片上传的 API 地址。

2. 创建自定义上传按钮

在「Markdown 笔记」编辑器中，添加一个 HTML 按钮：

<button id="custom-upload-button">自定义上传</button>

3. 监听按钮点击事件

在 JavaScript 代码中，监听按钮点击事件：

document.getElementById("custom-upload-button").addEventListener("click", function() {
    // 在这里编写自定义上传逻辑
});

4. 使用 API 上传图片

在自定义上传逻辑中，使用 FormData 对象构建请求数据，然后通过 fetch() 函数发送请求：

const formData = new FormData();
formData.append("file", file);

fetch(apiUrl, {
    method: "POST",
    body: formData
})
.then(response => response.json())
.then(data => {
    // 处理图片上传后的数据
});

实例代码

以下是一个完整的示例代码，演示如何使用自定义上传按钮通过后端 API 上传图片：

<button id="custom-upload-button">自定义上传</button>

<script>
document.getElementById("custom-upload-button").addEventListener("click", function() {
    const file = document.getElementById("file-input").files[0];
    if (!file) {
        alert("请选择要上传的图片");
        return;
    }

    const apiUrl = "https://note.youdao.com/yws/open/notebook/upload";
    const formData = new FormData();
    formData.append("file", file);

    fetch(apiUrl, {
        method: "POST",
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.code === 0) {
            // 上传成功，获取图片 URL
            const imageUrl = data.data.url;
            // 在编辑器中插入图片
            insertImage(imageUrl);
        } else {
            alert("图片上传失败：" + data.message);
        }
    });
});
</script>