Vue2获取图片src

Question

我有一个从数组中获取图像的函数

onFileChange(e) {
            let files = e.target.files;
            for (let file in files) {
                this.files.push(URL.createObjectURL(files[file]));
                if (files.hasOwnProperty(file)) {
                    console.log(files[file]);
                }
}

由这个元素触发：

<input multiple type="file" @change="onFileChange($event)"/>

我的这个组件的数据对象是：

data() {
        return {
            files: [],
            url: null,
            uploadedFiles: []
}

渲染时出现此错误：

app.js:1920 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

我实际上是在获取文件数组。但出现此错误，感谢帮助。

Answer 1

我仍然不知道为什么会出现此错误，但我找到了一个解决方法，方法是从 for/in 切换到常规 "boring" for.

                for (var i = 0; i < files.length; i++) {
                var file = files[i],
                    src = (window.URL || window.webkitURL).createObjectURL(file);
                this.files.push(src);
                }

如果有可以解释错误的答案，我会投它为答案，这是目前找到的最佳解决方案。

Answer 2

我认为您的问题不在于 for 和 for...in，而是在于 window.URL。
使用后：

(window.URL || window.webkitURL).createObjectURL

而不是这个 (URL => window.URL):

URL.createObjectURL

它对你有用，这是一个浏览器兼容性问题。

Answer 3

我认为问题出在这一行this.files.push(URL.createObjectURL(files[file]));

在{}.toString.apply(files[file]) === '[object Blob]'

的情况下应该是this.files.push(window.URL.createObjectURL(files[file]));

否则，

const binaryData = [];
binaryData.push(files[file]);
window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))

参考：Failed to execute 'createObjectURL'

Vue2获取图片src

Vue2 getting image src

javascript

filereader

vue.js

vuejs2

我有一个从数组中获取图像的函数

由这个元素触发：

我的这个组件的数据对象是：

渲染时出现此错误：