React js 鹅毛笔图片上传答案

【问题标题】：React js quill image uploadReact js 鹅毛笔图片上传
【发布时间】：2020-10-22 01:07:08
【问题描述】：

我正在尝试通过手动更改 Quill 图像上传功能将我的图像上传到服务器。这是我得到的错误（顺便说一句，没有与 API 相关的错误！），但是我被困了几个小时。

User trying to upload this: File {name: "rolling_pin.png", lastModified: 1588035813056, lastModifiedDate: Tue Apr 28 2020 04:03:33 GMT+0300, webkitRelativePath: "", size: 1289850, …}
quill.js:214 POST https://smartquestionapi.advancity.net/image 400
(anonymous) @ quill.js:214
quill.js:228 {error: true, response: 400, "rsponse: ": ""}
undefined:1 GET https://smartquestionapi.advancity.net/Images/undefined 404

这是我的代码：

function imageHandler() {
    /*
    DEFAULT UPLOAD BY LINK

    var range = this.quill.getSelection();
    var value = prompt('What is the image URL');
    if (value) {
        this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
    }*/

    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();
    input.onchange = async function () {
        const file = input.files[0];
        console.log('User trying to upload this:', file);

        const formData = new FormData()
        if (file !== null) {
            formData.append('file', file)
        }
        fetch('https://smartquestionapi.advancity.net/image', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
            },
            body: formData
        }).then(function (response) {
            if (response.ok) {
                return response.json()
            } else {
                return { "error": true,'response':response.status, 'rsponse: ':response.statusText }
            }
        }).then((json) => {
            console.log(json)
            var cursorPosition = this.quill.getSelection();
            var imagePath = "https://smartquestionapi.advancity.net/Images/" + json.imageUrl;
            this.quill.insertEmbed(cursorPosition.index, 'image', imagePath, Quill.sources.USER);
            return json;
        }).catch(err => {
            console.log("eror: ", err);
        })
    }.bind(this);
}

【问题讨论】：

标签： reactjs image file-upload fetch quill

【解决方案1】：

将文件改为文件

if (file !== null) {
           formData.append('files', file)
    }

【讨论】：