Javascript VueJs渲染阵列内的图像对象

我想在渲染之前将图像对象转换为base64数据url。图像对象位于一个数组中，我首先存储它，如下所示

        handleFileChange(e, index) {

            let file = e.target.files[0]
            console.log(file)
            let myFilesLength = this.form.files.length
            myFilesLength += 1
            if (myFilesLength == index) {

                this.form.files.push(file)
            } else {
                let html = '<div class="modal-cont"><h4>Please insert image in sequence.'+
                    '</h4><div class="alert__icon"><span></span></div></div>'
                Swal.fire({
                    customClass: {
                        popup: 'error-modal',
                    },
                    html: html,
                    showCloseButton: true,
                    allowOutsideClick: false,
                })
            }
            e.preventDefault()
        },

        convertBase64(file) {

            const dataUrl = new Promise ((resolve, reject) => {

                var reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            })

            dataUrl.then(url => {
                return url
            }).catch(error => {
                console.log('error  '+ error)
            })
        },

但当我测试我的代码时，它会呈现空图像，就像

---

您可以使用

URL.createObjectURL（文件[0]）

生成URL

代码笔-

        convertBase64(file) {

            const dataUrl = new Promise ((resolve, reject) => {

                var reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            })

            dataUrl.then(url => {
                return url
            }).catch(error => {
                console.log('error  '+ error)
            })
        },