vue.js - 用vue获取价值图像输入文件？

Question

我正在上传文件并获取图像值。

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

我有三个输入文件上传，每个输入都有一个@change事件在选择时获取图像。有没有办法让这三个输入文件上传使用相同的更改方法？请帮帮我。

标签： vue.jsvuejs2vue-component

Answer 1

使用 HTMLInputElement 名称属性

<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')
}

多张图片上传输入之一

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')
}