Question

我一直在尝试使用Laravel和Vue在后端保存blob文件，但无法使用。

当我返回所有响应以查看我上传的内容时，我看到blob字段为空。此外，使用vue devtool，它会显示Blob。

我用来上传的文件是模式：CampaignModal.vue。这是CampaignMessages.vue。

的子组件

以下是模态的模板。

<template>
 <div>
   <div class="row">
       <div class="input-field col s12">
            <a class="waves-effect waves-light btn blue right" href="#modal1">Message</a>
       </div>
   </div>

   <div id="modal1" class="modal">
       <div class="modal-content" style="height: 700px;">
           <h5>Add Message</h5>

           <div class="row">
               <div class="input-field col s12">
                   <textarea name="text" id="input-message" v-model="text" class="materialize-textarea"  data-length="200"></textarea>
                   <label for="input-message">Message</label>
               </div>
           </div>

           <div class="row">
               <div class="input-field col m6">
                   <datetime
                           placeholder="Select start date"
                           type="datetime"
                           v-model="startTime"
                           input-format="DD-MM-YYYY HH:mm"
                           input-class="my-input-class"
                           auto-continue
                           auto-close
                           required>

                   </datetime>

               </div>
               <div class="input-field col m6">
                   <datetime
                           placeholder="Select end date"
                           type="datetime"
                           v-model="endTime"
                           input-format="DD-MM-YYYY HH:mm"
                           input-class="my-input-class"
                           auto-continue
                           auto-close
                           required>

                   </datetime>
               </div>
           </div>

           <div class="row">
               <div class="col m6">
                   <div class="file-field input-field">
                       <div class="btn blue">
                           <span>Image</span>
                           <input type="file" id="input-image" name="image" @change="refreshImage" accept="image/*">
                           <!--<img :src="imageUrl" height="150">-->
                       </div>
                       <div class="file-path-wrapper">
                           <input class="file-path validate" type="text" placeholder="Upload image">
                       </div>
                       <img id="image-thumb" name="image-thumb" width="100px" class="image-thumbnail img-responsive" :src="imageUrl"/>
                   </div>
               </div>

               <div class="col m6">
                   <div class="file-field input-field">
                       <div class="btn blue">
                           <span>Video</span>
                           <input type="file" id="input-video" @change="refreshVideo" accept=".mov,.mp4">
                       </div>
                       <div class="file-path-wrapper">
                           <input class="file-path validate" type="text" placeholder="Upload video">
                       </div>
                       <video id="video-preview" width="100px" type="video/mp4" controls class="video-preview img-responsive" :src="videoUrl"/>
                   </div>
               </div>
           </div>

           <div class="row">
               <div class="input-field col s12">
                   <button @click.prevent="addMessage" class="modal-action 
                       modal-close waves-effect waves-light btn blue right">
                       Add Message
                   </button>
               </div>
           </div>
       </div>

    </div>

  </div>


</template>

以下是脚本

<script>
import { Datetime } from 'vue-datetime';

export default {
    components: { Datetime },

    data() {
        return {
            //messages: [],
            text: '',
            imageUrl: '',
            imageBlob: '',
            videoUrl: '',
            videoBlob: '',
            startTime: '',
            endTime: '',
        }
    },

    methods: {
        reset() {
            this.text = '';
            this.imageUrl = '';
            this.imageBlob = '';
            this.videoUrl = '';
            this.videoBlob = '';
            this.startTime = '';
            this.endTime = '';
        },

        refreshImage() {
            let comp = this;
            this.readObjectUrl(document.getElementById('input-image'), 
             function (url, blob) {
                comp.imageUrl = url;
                comp.imageBlob = blob;
            });
        },

        refreshVideo() {
            let comp = this;
            this.readObjectUrl(document.getElementById('input-video'), 
            function (url, blob) {
                comp.videoUrl = url;
                comp.videoBlob = blob;
                comp.playVideo(url);
            });
        },

        playVideo(url) {
            let video = document.getElementById('video-preview');
            video.preload = 'metadata';
            // Load video in Safari / IE11
            if (url) {
                video.muted = false;
                video.playsInline = true;
                video.play();
            }
        },

        addMessage() {
            this.$emit('added-message', this);
            this.reset();
        },

        // Read a file input as a data URL.
        readDataUrl(input, callback) {
            if (input.files && input.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    callback(fileReader.result);
                };
                fileReader.readAsDataURL(input.files[0]);
            }
            else {
                callback(null);
            }
        },

        // Read a file input as an object url.
        readObjectUrl(input, callback) {
            if (input.files && input.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    let blob = new Blob([fileReader.result], {type: 
                    input.files[0].type});
                    let url = URL.createObjectURL(blob);
                    callback(url, blob);
                };
                fileReader.readAsArrayBuffer(input.files[0]);
            }
            else {
                callback(null);
            }

        },

    }

  }
 </script>

我的提交方法如下：

submit() {
            let data = new FormData();
            data.append('description', this.description);
            for (let index in this.boards) {
                if (this.boards.hasOwnProperty(index)) {
                    data.append('displays[' + index + ']', 
                    this.boards[index]);
                }
            }
            for (let index in this.messages) {
                if (this.messages.hasOwnProperty(index)) {
                    data.append('messages[' + index + '][text]', 
                     this.messages[index].text);
                    data.append('messages[' + index + '][image]', 
                    this.messages[index].imageBlob);
                    data.append('messages[' + index + '][video]', 
                    this.messages[index].videoBlob);
                    data.append('messages[' + index + '][startTime]', 
                    this.messages[index].startTime);
                    data.append('messages[' + index + '][endTime]', 
                    this.messages[index].endTime);
                }
            }

            axios.post('/campaign/', data).then(response => {
                this.feedback = response.data;
            }).catch(error=>{
                this.errors = error
            });
        }

以下是我在vuedev工具上的内容。

如何在我的服务器上保存blob？

Blob值显示空对象

0 个答案: