从本地计算机上传文件时未定义羽毛笔

Question

我是使用 React.js 和 Quill 的初学者。我正在尝试通过重写现有的 imageHandler 从本地计算机上传文件。它确实获取了文件，但不上传它。错误如下：TypeError: Cannot read property 'quill' of undefined。到目前为止，这是我的代码：

function imageHandler() {
    console.log('Image Handler called');

    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 }
            }
        }).then(function (json) {
            console.log(file.name);
            var cursorPosition = this.quill.getSelection();
            var imagePath = "https://smartquestionapi.advancity.net/Images/" + file.name;
            
            this.quill.insertEmbed(cursorPosition.index, 'image', imagePath, Quill.sources.USER);
            return json;
        }).catch(err => {
            console.log("eror: ", err);
        })
    }.bind(this);
}

代码完全在 then(function (json){ 函数中粉碎。

Answer 1

我想是因为你在这部分没有绑定 this:

.then(function (json) {
            console.log(file.name);
            var cursorPosition = this.quill.getSelection();

可以用箭头函数解决：

    .then((json) => {
            console.log(file.name);
            var cursorPosition = this.quill.getSelection();

再看一个 look here，看看 function(){} 和 (args..) => {}

之间的区别

从本地计算机上传文件时未定义羽毛笔

Quill undefined when uploading a file from local machine

javascript

fetch

reactjs

quill