将文件流放入input里面

前端-杏

已于 2022-02-18 11:37:54 修改

阅读量1.3k

点赞数 1

文章标签： javascript 前端开发语言

于 2022-02-18 11:37:24 首次发布

本文链接：https://blog.csdn.net/cyongxing/article/details/122999893

版权

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

摘要由CSDN通过智能技术生成

一般我们上传文件都是获取文件流然后直接上传就可以了，但是最近做了个项目，需要做电子签名和拍照，这两个功能都需要用到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.csdn.net/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;