使用 VueJS、axios 和 Laravel 上传文件 [英] Uploading files with VueJS, axios and Laravel

问题描述

您好，我正在构建一个项目.用户可以在其中发送最多 5 张图像和最多 10 首带有文本的歌曲.但是当我向服务器发送请求时，我用 Laravel 处理，我无法获取这些文件.

//我来自 VueJS 的数据对象数据() {返回 {表单数据:新的表单数据()，皮克尔:{身体: ''，},isLoading: 假,图片: []，歌曲:[],}}//VuejS 中的 imagePreview 方法图像预览(事件){让输入 = event.target;如果(输入文件[0]){if (input.files.length <= 5) {for (让 i = 0; i < input.files.length; i++) {let reader = new FileReader();reader.onload = e =>{this.images.push(e.target.result);}reader.readAsDataURL(input.files[i]);}Array.from(Array(event.target.files.length).keys()).map(x => {this.formData.append('图片',event.target.files[x], event.target.files[x].name);});} 别的 {alert('您最多可以上传 5 张图片');}}}//VueJS 中的 musicPreview 方法音乐预览(事件){让输入 = event.target;if (input.files.length <= 5) {for (让 i = 0; i < input.files.length; i++) {this.songs.push(input.files[i].name.replace('.mp3', ''));}Array.from(Array(event.target.files.length).keys()).map(x => {this.formData.append('歌曲',event.target.files[x], event.target.files[x].name);});} 别的 {alert('您最多可以上传 10 首歌曲');}}//VueJS 中的 sharePikir 方法分享皮克尔(){this.formData.append('body', this.pikir.body);axios.put('/api/pikirler', this.formData).then(响应 => {this.pikir.body = '';this.isLoading = false;}).catch(() => {this.isLoading = false;});},

<label for="pikir">名称 paýlaşmak isleýärsiňiz?{{ pikirSymbolLimit }}<input type="text" name="pikir" id="pikir" maxlength="255"v-model="pikir.body"@keyup="handleSymbolLimit()"><div class="emoji"><a href="#"><i class="fa fa-smile-o"></i></a>

<div class="photo-music left"><label for="music-upload"><i class="fa fa-music"></i><input type="file" name="songs[]" id="music-upload"接受=音频/mp3"@change="musicPreview($event)"多个><i class="divider"></i><label for="image-upload"><i class="fa fa-image"></i><input type="file" name="images[]" id="image-upload"@change="imagePreview($event)"多个>

<div class="share right"><按钮:class="{ 'btn-medium': true, 'is-loading': isLoading }"@click.prevent="sharePikir($event)">派拉什马克

我把前端的东西放在上面，在我的 Laravel 端，我只返回所有请求:

公共函数 store(){返回请求()-> 全部()；}

这些是我从请求中得到的:

我找不到问题所在.提前致谢.

解决方案

噢耶！你错过了这一部分.你需要定义这个.

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

Hello I am building one project. Where user can send up to 5 images and up to 10 songs with the text. But when I send request to the server, where I handle with Laravel, I can't get those files.

// my data object from VueJS
data() {
  return {
    formData: new FormData(),
    pikir: {
      body: '',
    },
    isLoading: false,
    images: [],
    songs: [],
  }
}

// imagePreview method from VuejS
imagePreview(event) {
  let input = event.target;
  if (input.files[0]) {
    if (input.files.length <= 5) {
      
      for (let i = 0; i < input.files.length; i++) {
        let reader = new FileReader();

        reader.onload = e => {
          this.images.push(e.target.result);
        }

        reader.readAsDataURL(input.files[i]);
      }
      
      Array.from(Array(event.target.files.length).keys())
        .map(x => {
        
          this.formData
            .append('images',
              event.target.files[x], event.target.files[x].name);
          
      });
      
    } else {
      alert('You can upload up to 5 images');
    }
  }
}

// musicPreview method from VueJS
musicPreview(event) {
  let input = event.target;
  if (input.files.length <= 5) {
    for (let i = 0; i < input.files.length; i++) {
      this.songs.push(input.files[i].name.replace('.mp3', ''));
    }
     
    Array.from(Array(event.target.files.length).keys())
      .map(x => {

        this.formData
          .append('songs',
            event.target.files[x], event.target.files[x].name);

    });
    
  } else {
    alert('You can upload up to 10 songs');
  }
}

// sharePikir method from VueJS
sharePikir() {
  this.formData.append('body', this.pikir.body);
  
  axios.put('/api/pikirler', this.formData)
    .then(response => {
      this.pikir.body = '';
      this.isLoading = false;
    })
    .catch(() => {
      this.isLoading = false;
    });
},

<form action="#" id="share-pikir">
  <label for="pikir">
    Näme paýlaşmak isleýärsiňiz? {{ pikirSymbolLimit }}
  </label>
  
  <input type="text" name="pikir" id="pikir" maxlength="255"
    v-model="pikir.body"
    @keyup="handleSymbolLimit()">

  <div class="emoji">
      <a href="#"><i class="fa fa-smile-o"></i> </a>
  </div>

  <div class="photo-music left">
    <label for="music-upload">
      <i class="fa fa-music"></i>
    </label>
      
     <input type="file" name="songs[]" id="music-upload" 
      accept="audio/mp3"
      @change="musicPreview($event)"
      multiple>
      
      <i class="divider"></i>
     
      <label for="image-upload">
        <i class="fa fa-image"></i>
      </label>
      
     <input type="file" name="images[]" id="image-upload" 
      @change="imagePreview($event)"
      multiple>
      
  </div>

  <div class="share right">
  
    <button
      :class="{ 'btn-medium': true, 'is-loading': isLoading }"
      @click.prevent="sharePikir($event)">
      Paýlaşmak
    </button>
    
  </div>
  
</form>

I put my front end stuff above and in my Laravel side I just return all requests:

public function store(){
    return request()->all();
}

And these are what I get from request:

I couldn't found what is wrong. Thank you in advance.

解决方案

Oh yeah! you're missing this part. You need to define this.

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

这篇关于使用 VueJS、axios 和 Laravel 上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！