Качете няколко изображения в 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
защо не използвате axios.?   -  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…meIMTD5XBaIpCooIA9C8RBsEOsjTBLlrGhQp04m7nKNelnAHy}, когато премахна axios, работи - 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 call, уверете се, че използвате както е - person Kamlesh Paul; 23.10.2020