Question

我是Vue的新手，我一直在学习，观看一些教程和指南，并尝试在文件选择上创建自动上传表单，但这确实与jquery完全不同，使用jquery我通常很容易在Google，Google和Google上找到对于Vue，我很难找到答案，也找不到太多指南。

我现在所拥有的，我只是根据观看的一些指南编写了一些.vue代码。我在Laravel框架上使用Vue。我希望输入表单在选择时自动提交和上传文件。我设法做到了，这是代码：

<template>
<div class="vcontainer">
    <label class="btn btn-default btn-file float-left">
      <span v-if="file">Change</span>
      <span v-else>Choose file</span>
      <input type="file" id="file" ref="file" v-on:change="handleFile()">
    </label>

    <div v-if="file">
        <input type="hidden" :name="input_name" :value="file.id"/>
        <span>{{ file.name }}</span>  << This output name of file
        <span>{{ file.id }}</span>    << This WONT output file id
    </div>
    <div v-else>
        Nothing.
    </div>

</div>

</template>

<script>
    export default {
        props: ['input_name', 'post_url', 'bind_user'],
        data() {
            return {
                file: false
            }
        },
        methods: {
            handleFile() {
                this.file = this.$refs.file.files[0];

                this.submitFiles();
            },
            submitFiles() {
                let formData = new FormData();
                formData.append('file', this.file);
                formData.append('bind_user', this.bind_user);
                axios.post( this.post_url,
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function(response) {
                    this.file.id = response.data.id;
                    console.log(this.file); << This show's object array and there is id field there along with name and other data.
                }.bind(this)).catch(function(response) {
                });
            },
        }
    }
</script>

我对问题的理解是，如何根据事件或响应更改文本和输入值。成功提交并上传文件后，我会收到回复：

{success: true, id: 42}

非常简单，但是当我得到响应时，我想更改隐藏输入上的id值，所以最后我得到了这个：

<input type="hidden" :name="input_name" :value="42"/>

可能将输入字段的文本从Choose file更改为Change file。

如果我可以使用jquery和ajax做到这一点，我可以使其非常简单，在ajax成功的情况下，找到具有input_name id的元素并更改值。

但是在Vue上，我似乎迷迷糊糊了。

编辑：

我取得了一些进展，现在我更加困惑，因为我在console.log中得到了响应，并且得到了file.id，但是在vue模板中，相同的id是空的，但是来自相同的数组{{1 }}显示文件名。

Answer 1

您可以将API返回值绑定到data道具，将输入值绑定到那些数据道具，然后使用v-if确定是否应显示它们。下面的示例-请让我知道这是否可以解决您的问题，或者我是否误解了您所追求的。

我不得不使用一个“伪示例”，因此它与您的代码不是1：1的关系，但这应该足以说明要点。

[ CodePen mirror ]

new Vue({
  el: "#app",
  data: {
    id: "",
    title: "",
    error: ""
  },
  methods: {
    clearResults() {
      this.id = "";
      this.title = "";
      this.error = "";
    },
    simulateError() {
      this.clearResults();
      this.error = "Something went wrong!"
    },
    getData() {
      this.clearResults();
      var vm = this;
      axios
        .get("https://jsonplaceholder.typicode.com/todos/1")
        .then(function(response) {
          if (response.data.id && response.data.title) {
            vm.id = response.data.id;
            vm.title = response.data.title;
          }
        })
        .catch(function(error) {
          vm.error = error;
        });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

<div id="app">
  <div>
    <div>
      <button @click="getData" style="color:green;">Click to load data from api</button>
      <button @click="simulateError" style="color:red;">Click to simulate error</button>
    </div>
    <div style="margin-top:10px;">
      <input v-if="id != '' && title != ''" :name="title" :value="id" />
    </div>
    <div>
      <p v-if="error != ''" style="color:red;">{{ error }}</p>
    </div>
  </div>
</div>

Answer 2

最终解决了它，我只需要更改一行代码：

axios.post( this.post_url,
  formData,
   {
       headers: {
         'Content-Type': 'multipart/form-data'
       }
    }
 ).then(function(response) {
   this.file = response.data;
}

从this.file.id = response.data.id到this.file = response.data

这将起作用：

<div v-if="file.id > 0">
    <input type="hidden" :name="input_name" :id="input_name" :value="file.id" />
</div>

Axios上的Vue更改值和文本发布成功或失败

2 个答案: