在 Markdown 编辑框中实现拖放上传

Markdown 是一种方便的书写语言，但是仅限于书写。当需要在文档中插入多媒体元素，需要处理外部文件的引用时，就需要一些烦琐的处理。

下面的解决的方案通过前端的 js 代码和后端 api 相配合,实现了拖放式上传文件，只要将文件拖入编辑框中，就会自动上传该文件，并自动在编辑框中自动插入引用代码。

function insertText(textarea, text) {
    const position = textarea.selectionStart;

    const before = textarea.value.substring(0, position);
    const after = textarea.value.substring(position, textarea.value.length);
    textarea.value = before + text + after;
}

let dp = document.getElementById('drop_area');

dp.addEventListener('dragenter', function(e){
    e.preventDefault();
});

dp.addEventListener('dragover', function(e){
    e.preventDefault();
});

dp.addEventListener("drop", function(e){
    e.preventDefault();

    let files = e.dataTransfer.files;
    handleFiles(files);
})

function handleFiles(files) {
    ([...files]).forEach(uploadFile);
}

function uploadFile(file) {
    const ftype = file['type'].split('/')[0];
    let formData = new FormData;
    if (ftype == 'image') {
        const api = '<Your API Here>';
        formData.append('file', file);
        fetch(api, {method: 'POST', body: formData})
            .then(response => response.json())
            .then(response => {
                if (response.code == 0) {
                    const uri = response.uri;
                    const md = `![](${uri})\n`;
                    insertText(dp, md);
                }
            });
    } else {
        console.log('Unsupported file types: ', ftype);
    }
}

dp 就是编辑框，通过addEventListener将上传函数注册成回调函数。后端 API 在接收到文件后生成 uri, 并以 json 返回。js 脚本在拿到 json 后，根据不同的文件类型，自动在编辑框中插入引用代码。比如，图片用 ！[](URI)的形式进行引用。