Question

在尝试通过vue上传组件上传文件时，我停留在绑定变量以供选择。

我使用的组件是https://github.com/lian-yue/vue-upload-component。

我尝试按照指导检查简单的测试代码。
但是选择文件后没有响应。

代码在下面。我错过了什么？

<div id="app">
  <ul>
    <li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li>
  </ul>
  <file-upload
    ref="upload"
    v-model="files"
    post-action="/post.method"
    put-action="/put.method"
    @input-file="inputFile"
    @input-filter="inputFilter"
  >
  Upload file
  </file-upload>
  <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">Start upload</button>
  <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">Stop upload</button>
</div>
<script>
new Vue({
  el: '#app',
  data: function () {
    return {
      files: []
    }
  },
  components: {
    FileUpload: VueUploadComponent
  },
  methods: {
    inputFile: function (newFile, oldFile) {
      console.log('inputFile')
      if (newFile && oldFile && !newFile.active && oldFile.active) {
        // Get response data
        console.log('response', newFile.response)
        if (newFile.xhr) {
          //  Get the response status code
          console.log('status', newFile.xhr.status)
        }
      }
    },
    ....
</script>

Answer 1

上载的文件已绑定到文件。下面的代码是我正确的工作代码。

<div id="app">
      <p v-if="files.length">
          <ul>
            <li v-for="file in files">
                {{file.name}} <span v-if="file.success"> - . </span><span v-if="file.error"> - . </span>
                <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
            </li>
          </ul>
      </p>
  <file-upload
    ref="upload"
    v-model="files"
    post-action="/post.method"
    put-action="/put.method"
    @input-file="inputFile"
    @input-filter="inputFilter"
  >
  Upload file
  </file-upload>
  <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">Start upload</button>
  <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">Stop upload</button>
</div>
<script>
new Vue({
  el: '#app',
  data: function () {
    return {
      files: []
    }
  },
  components: {
    FileUpload: VueUploadComponent
  },
  methods: {
    inputFile: function (newFile, oldFile) {
      console.log('inputFile')
      if (newFile && oldFile && !newFile.active && oldFile.active) {
        // Get response data
        console.log('response', newFile.response)
        if (newFile.xhr) {
          //  Get the response status code
          console.log('status', newFile.xhr.status)
        }
      }
    },
    ....
</script>

Vue.js绑定文件用于上传

1 个答案: