Vue2获取图像源

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未捕获的TypeError：无法在“ URL”上执行“ createObjectURL”：找不到与提供的签名匹配的函数。

我实际上正在获取文件数组。但由于出现此错误，请帮助。

Answer 1

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

对于this.files.push(window.URL.createObjectURL(files[file]));，应该为{}.toString.apply(files[file]) === '[object Blob]'

否则，

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

参考：Failed to execute 'createObjectURL'

Answer 2

我仍然不知道为什么会发生此错误，但是我已经找到了解决方法，可以将for / in切换为常规的“无聊”。

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

如果会有一个可以解释错误的答案，请不正确地投票作为答案，这是目前找到的最佳解决方案。

Answer 3

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

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

代替此（URL => window.URL）：

URL.createObjectURL

它为您工作，这是浏览器兼容性问题。