时间戳

首页 > 解决方案 > 如何在浏览器上显示 Vue-Dropzone 响应？

laravel - 如何在浏览器上显示 Vue-Dropzone 响应？

问题描述

我需要向我的用户呈现 vue-dropzone 响应。我怎么做？

文件上传得很好，我只需要显示通知用户它是通过警告框或消息上传的。

<template>
    <div class="container">
        <div class="eight wide field">

                <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions" vdropzone-success=""></vue-dropzone>

        </div>
    </div>
</template>

<script>
    import vue2Dropzone from 'vue2-dropzone';
    import 'vue2-dropzone/dist/vue2Dropzone.min.css';

    export default {
      name: 'app',
      components: {
        vueDropzone: vue2Dropzone
      },
      data: function () {
        return {
          dropzoneOptions: {
              url: '/formsubmit',
              thumbnailWidth: 150,
              maxFilesize: 0.5,
              addRemoveLinks: true,
              removeFile:true,
              headers: { "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content }
          }
        }
      }
    };

</script>

标签： laravelvue.jsvue-dropzone

解决方案

您可以添加一个侦听器处理程序来侦听组件的vdropzone-success事件vue-dropzone。

这段代码应该可以工作。

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

methods: {
   uploadSuccess: function(file, response) {
      your_function(file, response);
   }
}

希望这对您有所帮助。

推荐阅读