Загрузите несколько изображений в Laravel с помощью Vue.js

Я пытаюсь загрузить изображение с помощью vue.js в Laravel, для этого я использую эту ссылку

https://jsfiddle.net/b412ruzo/

для загрузки изображения с помощью vue.js, и когда я отправляю форму, я получаю следующее изображение в массиве файлов

введите описание изображения здесь

теперь проблема в том, что я не могу получить этот массив файлов в контроллере laravel

когда я печатаю

$request->file('files')

в моем контроллере я получаю ноль. и когда я печатаю $ request- ›input ('files'), это результат, пустой массив

введите описание изображения здесь

Любая помощь по этому вопросу приветствуется.

Фрагмент кода:

data() {
     return {
    rawData: [],
    formData: new Form({
        files:[],
})
..

  const header = {
             Authorization: "Bearer " + this.token,
            };
  this.formData
        .post(APP_URL + `/api/post`, { headers: header })
        .then((response) => {

   }

javascript vue.js laravel laravel-5
person user3653474    schedule 23.10.2020    source источник
comment
добавьте свой код ajax туда, где вы отправляете файл   -  person Kamlesh Paul    schedule 23.10.2020
comment
@KamleshPaul: добавлен фрагмент кода, пожалуйста, проверьте, я могу получить значение других полей, но проблема касается только изображения   -  person user3653474    schedule 23.10.2020
comment
почему ты не пользуешься аксиомами.?   -  person Kamlesh Paul    schedule 23.10.2020
comment
@KamleshPaul: это был старый код, и ранее изображение загружалось с помощью плагина, но теперь я хочу загрузить его с помощью настраиваемой функции.   -  person user3653474    schedule 23.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

не уверен, что вы можете отправить запрос ajax через this.formData.post

попробуй это

new Vue({
  el: "#app",
  data() {
    return {
      option: {
        maxFileCount: 3
      },
      files:[],
      rawData: [],
    }
  },
  methods: {
    loaddropfile: function(e) {
        e.preventDefault()
      e.stopPropagation()
        alert('ok')
        console.log(e)
    },
    openinput: function() {
        document.getElementById("vue-file-upload-input").click();
    },
    addImage: function(e) {
        const tmpFiles = e.target.files
      if (tmpFiles.length === 0) {
        return false;
      }
      const file = tmpFiles[0]
      this.files.push(file)
      const self = this
        const reader = new FileReader()
      reader.onload = function(e) {
        self.rawData.push(e.target.result)
      }
      reader.readAsDataURL(file)
    },
    removeFile: function(index) {
        this.files.splice(index, 1)
      this.rawData.splice(index, 1)
      document.getElementById("vue-file-upload-input").value = null
    },
    upload: function() {
        alert('Check console to see uploads')
        console.log(this.files)
      axios.post(`${APP_URL}/api/post`,{files:this.files},{ headers: header })
        .then((response) => {});

    }
  },
  mounted(){

  }
})

он отправит данные вашей формы на files ключ, чтобы вы могли получить все файлы через $request->file('files')

person Kamlesh Paul    schedule 23.10.2020
comment
Я получаю сообщение: не аутентифицирован. 401 после использования axios - person user3653474; 23.10.2020
comment
У меня есть действующий токен {Authorization: Bearer Gx6j7U4No1P73jKawvV0KjXIFRiYG8eoSJsZVtBcksA… meIMTD5XBaIpCooIA9C8RBsEOsjTBLlrGhQp04m7nKNelnAHiosy, когда он работает - person user3653474; 23.10.2020
comment
пробовал с axios, также получая null в dd ($ request- ›file ('files')); - person user3653474; 23.10.2020
comment
попробуйте dd($request->all()); - person Kamlesh Paul; 23.10.2020
comment
Добавлен вывод, он возвращает тот же результат для поля файла, но получает другие поля. Есть ли проблема в коде Vue.js, который указан в приведенной выше ссылке на скрипт - person user3653474; 23.10.2020
comment
Я скопировал вашу кодовую форму jsfiddle и добавил вызов axios, убедитесь, что используете как есть - person Kamlesh Paul; 23.10.2020