Question

我正在使用vue.js进行图片上传，但无法弄清楚这个奇怪的问题。

在我看来：

{{ form.image }}

我在vue文件中的数据：

data: function() {
    return {
        form: new SparkForm({
            id: null,
            name: null,
            image: null
        }),
        imagePreview: null
    }
},

更改文件输入时调用的方法：

imageChanged: function(e) {
    var $this = this;
    let files = e.target.files || e.dataTransfer.file;

    if (!files.length) {
        return;
    } else {
        $this.form.image = files[0];
        console.log($this.form.image);
    }
},

这将控制台正确记录文件信息，但在视图中我只得到一个空对象。

看不到任何明显的东西......

Answer 1

我不确定你的Vue实例会认为form.image是反应性的，因为它是SparkForm实例的属性。

您可能希望在 image 属性上的 imageChanged 中测试强制反应性，如下所示：

$this.$set($this.form, 'image', files[0];

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Vue js不使用文件数据更新视图，但能够控制日志

1 个答案: