使用vue获取值图像输入文件? [英] get value image input file with vue?
本文介绍了使用vue获取值图像输入文件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在上传文件并获取图像值.
<div class="container"><div class="row"><输入类型=文件"名称=文件"@change="changeFile";/><输入类型=文件"名称=标志"@change="changeLogo";/><输入类型=文件"name="headerImg";多个@change="changeHeader"/></模板>数据 () {返回: {文件: ''，标识: ''，headerImg: [],}},方法: {更改文件(){让文件 = e.target.files[0];this.file = 文件；}更改徽标(){让 logo = e.target.files[0];this.logo = 标志；}改变标题() {let header = e.target.files[0];this.headerImg = 标题；}}
我有三个输入文件上传，每个输入都有一个 @change 事件来在选择时获取图像.有没有办法让这三个输入文件上传使用相同的更改方法?请帮帮我.
解决方案
使用 HTMLInputElement 名称属性
多张图片上传输入之一
data(){返回 {//文件或文件文件:空，标志:空，标头图片:空}}<输入类型=文件"名称=文件"@change="changeFile";/><输入类型=文件"名称=标志"@change="changeFile";/><输入类型=文件"name="headerImg";@change="changeFile";/>更改文件(e){const name = e.target.name,文件 = e.target.files,fileLength = e.target.files.lengthconst hasName = ['file', 'logo','headerImg'].includes(name)//文件长度:1 或 2,3,4,5if(hasName && fileLength) {if(fileLength === 1) this[name] = files[0]else this[name] = files//multipe: files 是数组，}else console.log('没有文件')}I am doing file upload and get the image value.
<template>
<div class="container">
<div class="row">
<input type="file" name="file" @change="changeFile" />
<input type="file" name="logo" @change="changeLogo" />
<input type="file" name="headerImg" multiple @change="changeHeader" />
</div>
</div>
</template>
data () {
return: {
file: '',
logo: '',
headerImg: [],
}
},
methods: {
changeFile() {
let file = e.target.files[0];
this.file = file;
}
changeLogo() {
let logo = e.target.files[0];
this.logo = logo;
}
changeHeader() {
let header = e.target.files[0];
this.headerImg = header;
}
}
I have three input file uploads, each input has an @change event to get the image when selected.Is there a way for those three input file uploads to use the same change method?
Help me please.
解决方案
use HTMLInputElement Name Properties
<input type="file" name="file" @change="changeFile" />
<input type="file" name="logo" @change="changeFile" />
<input type="file" name="headerImg" @change="changeFile" />
changeFile(e){
const name = e.target.name,
file = e.target.files[0]
const hasName = ['file', 'logo','headerImg'].includes(name)
if(hasName && file) this[name] = file
else console.log('error')
}
one of multipe image upload input
data(){
return {
// file or files
file: null,
logo: null,
headerImg: null
}
}
<input type="file" name="file" @change="changeFile" />
<input type="file" name="logo" @change="changeFile" />
<input type="file" name="headerImg" @change="changeFile" />
changeFile(e){
const name = e.target.name,
files = e.target.files,
fileLength = e.target.files.length
const hasName = ['file', 'logo','headerImg'].includes(name)
// fileLength: 1 or 2,3,4,5
if(hasName && fileLength) {
if(fileLength === 1) this[name] = files[0]
else this[name] = files // multipe: files is array,
}
else console.log('no file')
}
这篇关于使用vue获取值图像输入文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
