将文件流放入input里面_创建input并将文件流放进去-优快云博客

本文链接：https://blog.youkuaiyun.com/cyongxing/article/details/122999893

本文档介绍了一个技术问题，即如何在使用公共上传文件JS时，将通过canvas生成的图片文件流上传到服务器。作者详细解释了如何从canvas获取Base64编码的URL，转换为File对象，并利用DataTransfer的files属性将文件流添加到input中，以适应已有的上传机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般我们上传文件都是获取文件流然后直接上传就可以了，但是最近做了个项目，需要做电子签名和拍照，这两个功能都需要用到canvas 生成照片，然后上传服务器，本来这是没什么问题的，可是公司有一个公共的js上传文件，上传都需要用这个公共的上传，而这个封装的上传是直接根据input的id获取文件流的，也就是说我要用这个方法还要将获取到的文件流塞进input里面才可以

获取canvas 文件流

// canvas.toDataURL 返回的是一串Base64编码的URL
this.imgUrl = this.$refs.canvasF.toDataURL("image/png");
let arr = this.$refs.canvasF.toDataURL("image/png").split(",");
let type = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let imgFile = new File([u8arr], "img" + new Date().getTime() + '.png', { type });

将文件流塞进input里面，直接放进去是不行的，浏览器有限制，不允许直接赋值。找了半天，终于找到了一篇相关的文章https://blog.youkuaiyun.com/weixin_34273046/article/details/91386766，用DataTransfer的files属性给input赋值

html
<input type="file" ref="imgRef" id="VESignatureInputFile">

js
let data = new DataTransfer();
data.items.add(imgFile);
this.$refs.imgRef.files = data.files;