从vue-uploader获取成功上传的文件的列表

时间:2018-11-12 15:30:18

标签: vue.js vuejs2

如何获取使用此vue-uploader组件成功上传的文件数组?

https://github.com/simple-uploader/vue-uploader

我正在做这样的事情:

<template>
  <uploader :options="options">

    <uploader-unsupport></uploader-unsupport>

    <uploader-drop>
      <uploader-btn>Select files to upload...</uploader-btn>
    </uploader-drop>

    <uploader-list @successfully-uploaded-files="mySuccessfullyUploadedFiles"></uploader-list>

  </uploader>

  <pre>{{mySuccessfullyUploadedFiles}}</pre>

</template>

<script>
  export default {
    data () {
      return {
        mySuccessfullyUploadedFiles: [],
        options: {
          // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
          target: '//localhost:3000/upload',
          testChunks: false
        },
        attrs: {
          accept: 'image/*'
        }
      }
    }
  }
</script>

1 个答案:

答案 0 :(得分:0)

我知道了:

<template>
  <uploader :options="options" @file-success="mySuccessfullyUploadedFiles.push($event)">

    <uploader-unsupport></uploader-unsupport>

    <uploader-drop>
      <uploader-btn>Select files to upload...</uploader-btn>
    </uploader-drop>

    <uploader-list></uploader-list>

  </uploader>

  <pre>{{mySuccessfullyUploadedFiles}}</pre>

</template>

<script>
  export default {
    data () {
      return {
        mySuccessfullyUploadedFiles: [],
        options: {
          // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
          target: '//localhost:3000/upload',
          testChunks: false
        },
        attrs: {
          accept: 'image/*'
        }
      }
    }
  }
</script>