input file类型赋值问题

1：动态创建file类型input

input.id ='uploadImage';
input.type = 'file';
input.accept = '.png,.jpg,.jpeg';
input.name = 'cover';
input.style = 'display:none';
input.addEventListener('change', function($event) {
    handleChange($event);
});

2:将新创建input插入进某个容器

<div id="articleFileWrap">
   <input id="articleFileWrap" name="cover" accept=".png,.jpg,.jpeg" @change="handleChange($event)" style="display:none" type="file">
</div>

var form = document.getElementById('articleFileWrap');
form.innerHTML = "";
input.id ='uploadImage';
input.type = 'file';
input.accept = '.png,.jpg,.jpeg';
input.name = 'cover';
input.style = 'display:none';
input.addEventListener('change', function($event) {
    handleChange($event);
});
form.appendChild(input);

3:插入input时赋值 下面内容为封装方法可直接使用 更改from容器的ID值 获取你自己的容器 这里的change事件一定要有，不然二次上传文件会出现点击无效果 文件change事件可抽出进行封装，

/*
   file:所上传的文件
   type:文件后缀
*/
function creatInputFile(file,type) {
    var form = document.getElementById('articleFileWrap');
    form.innerHTML = "";
    const input = document.createElement('input');
    input.id ='articleFileWrap';
    input.type = 'file';
    input.accept = 'image/*';
    input.name = 'cover';
    input.style = 'display:none';
    input.addEventListener('change', function($event) {
        handleArticleCoverChange($event);
    });

    const byteString = atob(file.split(',')[1]);  //file为base64格式 获取整个流
    const mimeString = file.split(',')[0].split(':')[1].split(';')[0]; //file为base64格式 获取文件类型
    const ab = new ArrayBuffer(byteString.length); // 转为 ArrayBuffer
    const ia = new Uint8Array(ab);  // 将ArrayBuffer的内容作为数组元素
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    const blob = new Blob([ab], {type:type});

    //添加到DataTransfer对象
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(new File([blob], `file.png`, {type: blob.type}));

    input.files = dataTransfer.files;

    console.log(blob,dataTransfer.files);
    form.appendChild(input);
}

creatInputFile('某个文件','文件类型（png,jpg,jpeg,video...）')

注意： 重新赋值的文件需要时base64格式 在上传文件时需要对文件的blob进行缓存 再重新赋值时传入文件类型 缓存可能需要后台帮助，转为base64时文件过大 前端缓存不了 若没有跳转页面操作 赋值时再本页面下可取到时，则不用进行缓存 直接使用即可

重新赋值的文件需要时base64格式 在上传文件时需要对文件的blob进行缓存 再重新赋值时传入文件类型 缓存可能需要后台帮助，转为base64时文件过大 前端缓存不了 若没有跳转页面操作 赋值时再本页面下可取到时，则不用进行缓存 直接使用即可

重新赋值的文件需要时base64格式 在上传文件时需要对文件的blob进行缓存 再重新赋值时传入文件类型 缓存可能需要后台帮助，转为base64时文件过大 前端缓存不了 若没有跳转页面操作 赋值时再本页面下可取到时，则不用进行缓存 直接使用即可