Question

我的文件上传器神秘地损坏了，将文件转换为ObjectURL时，由于某种原因，视频变为空。以前没有发生这种情况，但是在重新访问我的项目并更新了我所有的软件包之后，此功能已损坏。

解决方案非常简单，但我不知道如何解决此问题。

getAvatar(e){
    let file = e.target.files[0]
    let reader = new FileReader()
    let limit = 1024 * 1024 * 2

    if(file.size > limit) {
        this.toast('error','File is too large')
        return false
    }

    reader.onloadend = (file) => {
        this.form.avatar = reader.result
        this.avatar = this.form.avatar
    }
    reader.readAsDataURL(file)

    this.form.a_ext = (/[.]/.exec(file.name)) ? /[^.]+$/.exec(file.name)[0] : undefined;
    this.form.a_type = file.type
    this.type = this.form.a_type.split('/').shift()

    if (file){
        let preview = URL.createObjectURL(file)
        switch(this.type){
            case "image":
                console.log(preview)
                this.getImageDimensions(preview)
                .then((dimensions) => {
                    this.form.a_dimensions = dimensions
                    this.handleResize(dimensions)
                })
                break;
            case "video":
                var video = document.getElementById('avatarVideo')
                var oldSrc = document.getElementById('videoSrc')
                if (oldSrc) { video.removeChild(oldSrc) }
                var src = document.createElement('source')
                src.setAttribute('id','videoSrc')
                src.setAttribute('src',preview)
                console.log(preview)
                video.appendChild(src)
                video.load()
                video.play()

                this.getVideoDimensions()
                .then((dimensions) => {
                    this.form.a_dimensions = dimensions
                    this.handleResize(dimensions)
                })
                .catch((e) =>{
                    this.toast('error',e.message)
                })
                break;
            default:
                this.toast('error','File type not supported')
                break;
        }
    } else {
        this.toast('error','File is null')
    }
}

它创建Blob URL，但最终为空

blob:http://xxx.xxx.xxx.xxx:8080/ab1b04c8-288e-4b5b-b12b-366639ec9794

使用此代码，图像可以正常工作，即使我将其重构为最简单的形式，我仍然无法使视频文件再次正常工作。

错误发生在

video.appendChild(src)

错误

error TypeError: "video is null"
    NuxtJS 9
        getAvatar
        invokeWithErrorHandling
        invoker
        invokeWithErrorHandling
        $emit
        onFileChange
        invokeWithErrorHandling
        invoker
        _wrapper
vendors.app.js:28236:7246
    NuxtJS 15

Answer 1

所以我通过反复试验找出了解决方案。我基本上不得不在文件读取器“读取器”之后重新排列代码，以将其放置在onloadend事件中。最终，这使我可以再次预览视频而无需上传它们。

但是，奇怪的是我删除视频src节点的代码也坏了，所以我不得不选择删除video元素的innerHTML以便删除旧的src节点并加载新选择的视频。

如果有人能告诉我我的代码为什么损坏，那将很有趣。在升级nuxt和我使用的所有软件包之前，我以前的设置工作正常，但是我仍然不知道如何破坏此代码。

getAvatar(e){
    let file = e.target.files[0]
    let reader = new FileReader()
    let limit = 1024 * 1024 * 2

    if(file.size > limit) {
        this.toast('error','File is too large')
        return false
    }

    this.form.a_ext = (/[.]/.exec(file.name)) ? /[^.]+$/.exec(file.name)[0] : undefined;
    this.form.a_type = file.type
    this.type = this.form.a_type.split('/').shift()

    if (file){
        let preview = URL.createObjectURL(file)
        reader.onloadend = (file) => {
            this.avatar = reader.result
            this.form.avatar = reader.result
            switch(this.type){
                case "image":
                    this.getImageDimensions(preview)
                    .then((dimensions) => {
                        this.form.a_dimensions = dimensions
                        this.handleResize(dimensions)
                    })
                    break;
                case "video":
                    var video = document.getElementById('avatarVideo')
                    video.innerHTML = '';
                    var src = document.createElement('source')
                    src.setAttribute('id','videoSrc')
                    src.setAttribute('src',preview)
                    video.appendChild(src)
                    video.load()
                    video.play()

                    this.getVideoDimensions()
                    .then((dimensions) => {
                        this.form.a_dimensions = dimensions
                        this.handleResize(dimensions)
                    })
                    .catch((e) =>{
                        this.toast('error',e.message)
                    })
                    break;
                default:
                    this.toast('error','File type not supported')
                    break;
            }
        }
        reader.readAsDataURL(file)
    } else {
        this.toast('error','File is null')
    }
}

还有另一种方法可以将视频文件加载到视频元素中吗？

1 个答案: