如何在vue.js中动态上传图像？

Question

查看代码:codepen

我想通过表单发布数据;

有一个添加图像按钮,当我第一次单击该按钮并选择图像时,然后在页面中显示图像信息.当我再次单击该按钮时,然后在页面中显示两个图像信息.

问题是:我无法设置文件值 <input type='file' />

这该怎么做？

Answer 1

这是一个源自原始codepen的潜在解决方案.

我更新了viewmodel以包含一个文件数组.所述v-for呈现该阵列,并包括用于每个项目的隐藏文件输入(同您的代码).但是,与您的示例不同,文件输入不是模型绑定到文件信息.相反,upload()只要其值发生变化,它就会调用该方法.该upload()方法处理更新基础文件信息.有了这个,所有Add Image链接需要做的就是将一个新对象推送到files数组上,然后在该文件的input元素上触发click事件(在它被渲染之后).

相关代码如下.

HTML

<ul>
  <li v-for="file in files">
    <div class="file_item">
      <div class="info">
        <strong>{{file.name}}</strong>
        <p>{{file.size | kb}}</p>
      </div>
    </div>
    <input id="file-{{$index}}" type="file" accept="image/*" @change="upload(file, $event)" style="display:none">
  </li>
</ul>
<div class="value_btn">
  <a href="#" v-on:click="addImage" class="add">
    <span>Add Image</span>
  </a>
</div>

使用Javascript

var vm = new Vue({
  el: "#item",
  data: {
    files : []       
  },
  methods: {
    addImage: function(){
      this.files.push({ name: "", size: 0})
        this.$nextTick(function () {
            var inputId = "file-" + (this.files.length-1);
            document.getElementById(inputId).click();
        });  
    },
    upload: function(file, e){
      var f = e.target.files[0];
      file.name = f.name;
      file.size = f.size;
    }
  }
})