在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>