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

How to dynamically upload image in vue.js?

本文关键字：动态 vue js      更新时间：2023-09-26

参见代码：codepen

我想按表格发布数据;

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

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

怎么做？

这是从原始代码笔分叉的潜在解决方案。

我更新了视图模型以包含文件数组。v-for呈现该数组，并包含每个项的隐藏文件输入（与代码中的输入相同）。但是，与示例不同，文件输入未绑定到文件信息。相反，每当更改其值时，它都会调用 upload() 方法。upload() 方法处理基础文件信息的更新。完成此操作后，Add Image链接需要做的就是将一个新对象推送到 files 数组上，然后在该文件的输入元素上触发 click 事件（在呈现后）。

相关代码如下。

目录 

<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>

爪哇语

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;
    }
  }
})
相关文章：