1.使用vue-cropper软件进行图片裁剪时,无法多次选取同一张图片(无法触发change事件),原因是,input框的value没有改变,所以没有触发:在上传后添加 $('#uploads').val('');将input框value清除,就解决了
<label class="btn" for="uploads">上传图片</label>
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);display: flex;flex-direction: row"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="editUploadImg($event, 1)" />
editUploadImg(e, num) {
var file = e.target.files[0];
this.headEditVisable=true
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
return false;
}
var reader = new FileReader();
reader.onload = (e) => {
let data;
if (typeof e.target.result === 'object') {
data = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data = e.target.result;
}
if (num === 1) {
this.editOption.img = data;
} else if (num === 2) {
this.example2.img = data;
}
};
reader.readAsDataURL(file);
//在上传后添加 $('#uploads').val('');将input框value清除,就解决了
$('#uploads').val('');
// reader.readAsArrayBuffer(file);
},