使用VueJS,axios和Laravel上传文件

时间:2017-06-30 16:11:27

标签: laravel vue.js single-page-application axios

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

// 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>

我把我的前端东西放在上面,在我的Laravel方面,我只是回复所有请求:

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

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

Image

Image 2

Image 3

我找不到有什么问题。提前谢谢。

2 个答案:

答案 0 :(得分:8)

这是我的解决方案

&#13;
&#13;
ROW_NUMBER()
&#13;
with firstonly as (
    select CustomerId, DateModified, ROW_NUMBER() over (partiton by CustomerId order by DateModified desc) rownumDesc, ROW_NUMBER() over (partiton by CustomerId order by DateModified) rownumAsc
    FROM [myTable].[OrderStatus] os WHERE os.CustomerId = 1 AND os.StatusID = 1 
)
select * 
from firstonly 
where rownumDesc = 1
    and rownumAsc != 1
;
&#13;
&#13;
&#13;

答案 1 :(得分:7)

噢,是的!你错过了这部分。你需要定义它。

@angular/*-2