javascript - this. undefined inside dropzone success callback vuejs2

Question

I am using Dropzone.js with Vuejs2. The file upload is working fine however, inside the success callback function i cannot assign the response to an object of the parent.

Here is a sample of my implementation:

<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>

the error is:

Uncaught TypeError: Cannot set property 'name' of undefined

I tried the solutions found Here but its still not working.

标签： javascriptvuejs2dropzone.js

Answer 1

看文档，你用错了。

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

在您的情况下，您需要使用 vue-2-dropzones eventsvdropzone-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
  }
}