如何在vue.js中存儲文件？

Question

我想存儲圖像文件和視頻文件，但數據顯示Blob。

視頻文件和圖像文件在上傳后立即顯示，這很酷。

拜托，我不確定下面的代碼是否正確：我該如何解決？ 我正在使用VueJs和Laravel。

另外，我在addMessage上調用的reset方法不允許隨后添加另一個文件。 不知道它是否是調用它的地方。

下面是我的腳本。

<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($('#input-image').get(0), function (url, blob) {
                comp.imageUrl = url;
                comp.imageBlob = blob;
            });
        },

        refreshVideo() {
            let comp = this;
            this.readObjectUrl($('#input-video').get(0), function (url, blob) {
                comp.videoUrl = url;
                comp.videoBlob = blob;
                comp.playVideo(url);
            });
        },

        playVideo(url) {
            let video = $('#video-preview').get(0);
            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);
            }

        },

    }

}

除文件外，所有字段均有效。

感謝您的協助。

Answer 1

我不太確定您實際想要實現什么，但是可以使用Laravel-存儲來保存文件。

在您的vue.js文件中添加axios post方法並發送上傳的文件。 然后將其保存在帶有存儲器的控制器中。

例

• 將輸入字段放入html <form name='imageForm'>

• 創建文件夾storage/app/images

在Vue中

let form = document.forms.namedItem('imageForm');
let formData = new FormData(form);

axios.post('/uploads', formData)
        .then(response => {
            console.log('success')
        })

在您的控制器中

public function store(Request $request) {
        // Validate file upload
        $this->validate($request, [
            'image' => 'required|file'
        ]);

        // Define a name for the file with the correct extension
        $fileExt = $request->image->extension();
        $imageName = "SampleImage" . $fileExt;

        // Save file in storage
        $imagePath = $request->image->storeAs('images', $imageName);

        // Save file name in database to fetch it later (Order 1 in this example)
        $currentOrder = Order::find(1);
        $currentOrder->image = $imageName;
        $currentOrder->save();
    }

使用通配符定義路由（例如/uploads/{{image}}

然后使用以下控制器方法來獲取它

public function show($image) {
        return Storage::disk('local')->get('images/' . $image);
    }

讓我知道這是否對您有幫助！