input文件上传

最近做项目,遇见了一些问题,特此记录一下。

图片上传问题

由于input的type=‘file’时,change事件会判断上传文件是否一样,如果不一样,才会触发该事件。因此,就导致了一个问题,前后2次上传的图片文件一样,就不会触发上传事件。

解决方法:
在图片重置的时候:
document.getElementById('***').value = ''
重置该input框的value值

图片下载问题

利用a标签进行下载。

export function download(id, fileName='xiaoming'){
	// 这里一定要获取到所需下载的图片或者canvas这种
    const dom = document.querySelector(`#${id}`)
    const imgUrl = dom.toDataURL()
    
    let a = document.createElement('a')
    
    a.download = fileName;
    // 下载地址
    a.href = imgUrl
    document.body.appendChild(a);
    // 触发下载
    a.click();
    document.body.removeChild(a);
    // document.appendChild: 有可能会报错
}

你可能感兴趣的:(javascript,前端,html5,vue.js,reactjs)