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

Question

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

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

请问下面的代码是否正确：我该如何解决这个问题？我使用的是 VueJs 和 Laravel。

此外，我在 addMessage 上调用的 reset 方法不允许添加另一个文件。不知道是否是调用它的正确位置。

以下是我的 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);
            }

        },

    }

}

除文件外，所有字段均正常工作。

感谢您的帮助。

- cjustinobi

Answer 1

我不太确定你想要实现什么，但你可以使用Laravel - Storage来保存文件。

在你的vue.js文件中添加一个axios post方法并发送上传的文件。然后在控制器中使用storage保存它。

示例

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

如果这对您有所帮助，请告诉我！

- Mango D