Vue.js中两个file输入框如何区分并将base64值动态赋值到不同变量

你可以通过给上传事件传递标识字段的方式实现动态赋值，这是最直观且易维护的方案： #

步骤1：修改模板的事件绑定 #

给两个file输入框的@change事件额外传递对应的字段名参数，同时保留原有的事件对象$event：

<div class="singleInput50">
  <span>Personal Image:</span>
  <input type="file" @change="handleImage('imgPersonal', $event)" accept="image/*" ref="imgPersonal">
</div>

<div class="singleInput50">
  <span>Business logo</span>
  <input type="file" @change="handleImage('businessLogo', $event)" accept="image/*" id="businessLogo">
</div>

步骤2：修改处理方法，接收字段参数 #

调整handleImage和createBase64Image的入参，通过方括号语法动态访问userObject的属性：

handleImage(field, e) {
  const selectedImage = e.target.files[0];
  // 新增非空判断，避免用户取消上传时报错
  if (!selectedImage) return
  this.createBase64Image(field, selectedImage);
},
createBase64Image(field, fileObject) {
  const reader = new FileReader();

  reader.onload = (e) => {
    // 用方括号动态赋值，适配不同字段
    this.userObject[field] = e.target.result;
  };
  reader.readAsDataURL(fileObject)
},

替代方案（无需修改模板传参） #

如果你不想改动模板的事件绑定，也可以通过触发事件的元素属性判断来源：

handleImage(e) {
  const selectedImage = e.target.files[0];
  if (!selectedImage) return
  // 通过id判断上传来源
  const field = e.target.id === 'businessLogo' ? 'businessLogo' : 'imgPersonal'
  this.createBase64Image(field, selectedImage);
}

内容的提问来源于stack exchange，提问作者Profit23