时间戳

首页 > 解决方案 > vue js中两个文件输入字段之间的区别

vue.js - vue js中两个文件输入字段之间的区别

问题描述

我在一个表单中有两个输入文件字段，如下所示：

    <div class="singleInput50">
      <span>Personal Image:</span>
      <input type="file" @change="handleImage" accept="image/*" ref="imgPersonal">
    </div>

    <div class="singleInput50">
      <span>Business logo</span>
      <input type="file" @change="handleImage" accept="image/*" id="businessLogo">
    </div>

两者都指定保存不同的图像（之后将转换为 base64），并且应该绑定到不同的数据变量，例如这两个：

businessLogo: '',
imgPersonal: '',

两者都用这种方法处理：

handleImage(e) {
      const selectedImage = e.target.files[0];
      this.createBase64Image(selectedImage);
    },
    createBase64Image(fileObject) {
      const reader = new FileReader();

      reader.onload = (e) => {
        this.userObject.imgPersonal = e.target.result; **//Here I can't figure out how to make it dynamic, if a user choosed personalImage or businessLogo field**
      };
      reader.readAsDataURL(fileObject)
      // console.log("file object", fileObject);
    },

目标是使分配动态化。如果用户将文件上传到“个人图像”输入，图像将被分配给“imgPersonal”数据变量，如果是“企业标志”，图像图像将被分配给“企业标志”

标签： vue.jsvuejs2bindingbase64

解决方案

您可以简单地将参数传递给您的方法：

handleImage(e, imageName) {
      const selectedImage = e.target.files[0];
      this.createBase64Image(selectedImage, imageName);
},
createBase64Image(fileObject, imageName) {
      const reader = new FileReader();

      reader.onload = (e) => {
        this.userObject[imageName] = e.target.result; **//Here I can't figure out how to make it dynamic, if a user choosed personalImage or businessLogo field**
      };
      reader.readAsDataURL(fileObject)
      // console.log("file object", fileObject);
},

在您的模板中：

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

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

推荐阅读