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 Uncaught :未能在‘URL’上执行'createObjectURL‘：没有找到与提供的签名匹配的函数。

我实际上是在获取文件数组。但是有了这个错误，帮助感激。

Answer 1

我仍然不知道为什么会发生这个错误，但是我已经找到了一个解决办法，从for/in切换到常规的“无聊”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

我想问题就出在这行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"}))

参考文献：执行“createObjectURL”失败

Answer 3

我认为你的问题不是for和for...in，而是window.URL。

在你使用这个之后：

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

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

URL.createObjectURL

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