Блог

У меня есть компонент Vue, который фиксирует ввод файла от пользователя. Я хочу, чтобы ввод файла открывал файловый браузер, в котором пользователь может выбрать допустимый тип файла, а затем отобразить этот файл как выбранный файл в виде чипа. Когда пользователь нажимает submit , я хочу, чтобы был выполнен вызов axios для отправки файла в серверную часть.

Проблема в том, что, как только файл выбирается из файлового браузера, выполняется вызов axios — без нажатия пользователем кнопки отправки. Я все еще изучаю, как настроить фиктивный проект в Codepen. Однако мое приложение запускает компонент правильно.

 import { store, mutations } from "../../store.js"
import * as vuetify from "https://cdn.skypack.dev/vuetify@2.4.3";
import * as axios from "https://cdn.skypack.dev/axios@0.21.1";

export default {
  data() {
    return {
      upDocs: '',
      files: [],
      file: '',
      formData: new FormData()
    }
  },
  
  methods: {
    submitFile() {
      var FormData = require('form-data');
      var data = new FormData();
      data.append('File', this.file);
      
      var config = {
        method: 'post',
        url: 'https://someServer.com:8101/path/to/controller',
        headers: {
          'Content-Type' : 'multipart/form-data',
        },
        data : data
      };
      
      axios(config)
        .then(response => {
          console.log(JSON.stringify(response.data));
      })
    }
  }
  
}
 

Codepen

Вы пытаетесь связать click обработчик с v-bind сокращением, подобным этому:

 <v-btn :click="submitFile()">
 

Это фактически привязывает свойство с именем click к результату submitFile() (метод вызывается немедленно).

Вероятно, вы хотели использовать v-on сокращение следующим образом:

 <v-btn @click="submitFile()">

<!-- or -->
<v-btn @click="submitFile">