首页 > 解决方案 > 从 vue-uploader 获取成功上传的文件列表

问题描述

我如何能够获取使用此 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>

标签: vue.jsvuejs2

解决方案


我想到了:

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

推荐阅读