javascript - 为什么配合插件调用vue组件方法失败？

Question

我从这里获取修复方向图像的引用:

https://github.com/blueimp/JavaScript-Canvas-to-Blob

我尝试在 vue 组件中像这样:

<template>
    <div>
        ...
    </div>
</template>
<script>
    export default {
        ...
        methods: {
            ...
            changeImage(item, $event) {
                ...
                loadImage(
                    $event.target.files[0],
                    function (img) {
                        img.toBlob(
                            function (blob) {
                                // create a form
                                const form = new FormData();
                                form.append('file', blob, $event.target.files[0].name);
                                // define the done handler
                                const onDone = (response) => {
                                    if (!$.trim(response)) {   
                                        alert('No response');
                                    }
                                    else {   
                                        const files = $event.target.files || $event.dataTransfer.files
                                        if (!files.length)
                                            return;
                                        this.createImage(item, response)
                                        ...
                                    }

                                }
                                // define th post options
                                const options = {
                                    url: window.Laravel.baseUrl+'/product/addImageTemp',
                                    type: "POST",
                                    data: form,
                                    enctype: 'multipart/form-data',
                                    processData: false,  // tell jQuery not to process the data
                                    contentType: false   // tell jQuery not to set contentType
                                }
                                // submit the image
                                $.ajax(options).done(onDone);
                            }, $event.target.files[0].type
                        );
                    },
                    {
                         maxWidth: 600,
                         canvas: true,
                         pixelRatio: window.devicePixelRatio,
                         downsamplingRatio: 0.5,
                         orientation: true
                    } // Options
                );
            },
            createImage(item, response) {
                ...
            }
        }
    }
</script>

它有效。它成功上传文件夹中的图像。但在控制台上存在错误:

Uncaught TypeError: Cannot read property 'createImage' of undefined

这里的错误:this.createImage(item, response)

似乎是错误，因为它无法在 function (img) {

中使用 this

如何解决这个问题？

我需要这个插件来修复方向图像

Answer 1

在方法开头捕获当前的 this 并用它来调用 createImage 方法:

methods:{
  changeImage(item, $event) {
    const self = this
    loadImage($event.target.files[0], function(img){
      ...
        self.createImage(...)
      ...
    })
  }
}