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

Question

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

    <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”数据变量，如果是“企业徽标”，图像图像将被分配给“企业徽标”

Answer 1

您只需将参数传递给您的方法即可：

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>

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

differ between two file input fields in vue js

base64

binding

vue.js

vuejs2