未捕获类型错误：this.testFunction 不是函数

Question

我有一个带有上传组件的 Vue 应用程序，它获取图像（dropzone），将其传递给cropper（cropperjs）并在裁剪后将其返回到 dropzone。 我想在上传之前压缩图像，所以我要从 dropzone 对象获取图像并将其传递给压缩器（compressorjs）。我正在与错误作斗争，无法继续下去......这就是情况：

裁剪方法：

cropImage() {
            // get image data for post processing, e.g. upload or setting image src
            this.$refs.cropper.getCroppedCanvas().toBlob((blob)=> {
                var croppedFile = this.blobToFile(blob, this.fileName)
                croppedFile.accepted = true
                this.$refs.myVueDropzone.dropzone.addFile(croppedFile)
                this.cropperReset()
            });
        },

此时，我的拖放区获取了裁剪后的图像并正确生成了裁剪器缩略图。
现在我要启动上传方法，但在处理队列之前压缩图像。

launchUpload() {
            new Compressor(this.$refs.myVueDropzone.dropzone.files[0], {
                quality: 0.6,
                maxWidth: 250,
                minWidth: 250,
                success(compressedResult){
                    this.testFunction(compressedResult)
                },
                error(err) {
                    console.log(err.message);
                },
            })

            /*await this.$refs.myVueDropzone.processQueue()
            this.$refs.myVueDropzone.removeAllFiles()*/
        }

我将把文件传递给压缩器，传递一些设置并获取“compressedResult”blob，它是图像的压缩版本。我的问题是使用 testFunction 会导致：

“未捕获的类型错误：this.testFunction 不是函数”

testFunction 只是我在尝试了其他所有方法后创建的一个虚拟函数..

testFunction(compressed){
            this.$refs.myVueDropzone.removeAllFiles()
            this.$refs.myVueDropzone.addFile(compressed)
        },

console.log 进入 testFunction 结果“未定义”，似乎没有任何效果..
我在这里发布的每个方法都是 Vue 组件的“方法”对象的一部分。

组件交互的Vue部分：

<v-dialog
            v-model="is_show"
            persistent
            max-width="800px"
        >
            <v-card>
                <v-card-title>
                    <span class="text-h5">Upload File</span>
                </v-card-title>
                <v-card-text>
                    <vue-dropzone
                        ref="myVueDropzone"
                        id="dropzone"
                        :options="dropzoneOptions"
                        @vdropzone-file-added="(file) => passToCropper(file)"
                        @vdropzone-complete="reloadAndClose"
                    ></vue-dropzone>
                    <v-col cols="12" class="text-right">
                        <v-btn
                            @click="closeModal"
                            class="ma-2"
                            :disabled="loading"
                        >
                            Close
                        </v-btn>
                        <v-btn
                            @click="launchUpload"
                            class="ma-2"
                            color="primary"
                            :loading="loading"
                        >
                            Submit
                        </v-btn>
                    </v-col>
                </v-card-text>
            </v-card>
        </v-dialog>

如果我不压缩图像并在“addFile”部分之后将我的拖放区队列处理到cropImage方法中，那么一切都会完美运行。
非常感谢！！

Answer 1

您应该使用 箭头函数表达式 而不是函数表达式，因为使用函数表达式会创建自己的

this

绑定。

所以在你的情况下

testFunction

在新上下文中不存在（新的

this

）。

success(compressedResult){
    this.testFunction(compressedResult)
 },

查看

this

在箭头函数表达式的情况下如何引用全局对象，以及在函数表达式的情况下

this

如何引用调用该方法的对象：

const obj = {
  someProperty: 'someProperty',
  a: () => {
    console.log(this === window, this === obj)
  },
  b() {
    console.log(this === window, this === obj)
  }
}

obj.a()
obj.b()

您还可以保留函数表达式并使用

this

的存储引用，例如：

launchUpload() {
    const that = this;
    new Compressor(this.$refs.myVueDropzone.dropzone.files[0], {
        quality: 0.6,
        maxWidth: 250,
        minWidth: 250,
        success(compressedResult){
            that.testFunction(compressedResult)
        },
        error(err) {
            console.log(err.message);
        },
    })

    /*await this.$refs.myVueDropzone.processQueue()
    this.$refs.myVueDropzone.removeAllFiles()*/
}

Answer 2

TypeError：this._mainWorld.awaitForFunction 不是一个函数 在 Frame.waitForFunction (C:\Users\Lucas\Documents\GitHub\Masterrobo ode_modules\puppeteer\li