Question

this.undefined 在 dropzone 成功回调 vuejs2 中

2018-11-09

1020

javascript vuejs2 dropzone.js

我正在将 Dropzone.js 与 Vuejs2 结合使用。文件上传工作正常，但是在 success 回调函数中，我无法将响应分配给父级对象。

这是我的实现示例：

<script>
    import vueDropzone from "vue2-dropzone";

      export default {
        components: {
          vueDropzone
        },
        props: {
        },
        data: () => ({
            data: {
              name: ''
            },
            dropOptions: {
                url: "https://httpbin.org/post",
                maxFileSize: 10,
                autoProcessQueue: false,
                success: (file, response) => {
                if (response.message == "success"){
                  this.data.name = response.name;                
                  this.add();
                }
                else{
                  console.log('Error Uploading file');
                }
           }
       }),
     };
</script>

错误是：

Uncaught TypeError: Cannot set property 'name' of undefined

我尝试了这里找到的解决方案，但仍然不起作用。

Answer 1

查看文档，您使用错了。

dropOptions 应该只包含它的配置，而不是事件。

您需要使用 vue-2-dropzones 事件，在您的情况下为 vdropzone-success(file, response) ，所以：

<vue-dropzone
  ref="myVueDropzone"
  id="dropzone"
  :options="dropOptions"
  v-on:vdropzone-success="someSuccessMethod">
</vue-dropzone>

...
data() { /* ... */ },
methods: {
  someSuccessMethod(file, response) {
    // your logic
  }
}

Answer 2

这根本不起作用，因为 this 绑定到了您想象不到的另一个对象。这是人们切换或学习 JavaScript 时出现的默认错误。

dropOptions 是一个对象。 success 函数中的 this 引用 dropOptions 对象，而不是它的父对象。

因此 dropOptions 没有字段 data ，因此是 undefined ，并且您无法访问 name 。

请参阅：在 javascript 中访问父对象

编辑：为了进一步调查，请提供您对发布的链接所做操作的一些代码。这似乎是朝着正确的方向发展，但从简单的“不起作用”来看，我们无法告诉您还需要注意什么。