Question

我想存储图像文件和视频文件，但数据显示的是Blob。

视频文件和图像文件会在上传后立即显示，这很酷。

拜托，我不确定下面的代码是否合适：我该如何解决这个问题？我正在使用VueJs和Laravel。

另外，我在addMessage上调用的重置方法不允许后续添加另一个文件。不知道是不是写它的地方。

以下是我在vue中的脚本。

<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);
            }

        },

    }

}

除文件外，所有字段都在工作。

The data

感谢您的帮助。

Answer 1

我不太确定您实际想要实现的目标，但您可以使用Laravel - Storage来保存文件。

在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);
    }

请告诉我这是否对您有帮助！

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

1 个答案: