Javascript 如何在vue.js中动态上传图像?
参见代码: 我想通过表格发布数据 有一个添加图像按钮,当我第一次单击按钮并选择图像,然后在页面中显示图像信息时。当我再次单击按钮时,在页面中显示两个图像信息 问题是:我无法将文件值设置为Javascript 如何在vue.js中动态上传图像?,javascript,vue.js,Javascript,Vue.js,参见代码: 我想通过表格发布数据 有一个添加图像按钮,当我第一次单击按钮并选择图像,然后在页面中显示图像信息时。当我再次单击按钮时,在页面中显示两个图像信息 问题是:我无法将文件值设置为 如何做到这一点?这里有一个潜在的解决方案 我更新了viewmodel以包含一个文件数组。v-for呈现该数组,并包含每个项目的隐藏文件输入(与代码中的相同)。但是,与示例不同,文件输入没有绑定到文件信息的模型。相反,只要更改其值,它就会调用upload()方法。upload()方法处理基础文件信息的更新。在这个
如何做到这一点?这里有一个潜在的解决方案 我更新了viewmodel以包含一个文件数组。
v-for
呈现该数组,并包含每个项目的隐藏文件输入(与代码中的相同)。但是,与示例不同,文件输入没有绑定到文件信息的模型。相反,只要更改其值,它就会调用upload()
方法。upload()
方法处理基础文件信息的更新。在这个位置上,addimage
链接需要做的就是将一个新对象推送到files
数组上,然后在该文件的输入元素上触发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>
出于安全原因,您无法通过编程设置
input type='file'
标记的值。这不是Vue问题。
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;
}
}
})