前端文件上传多种方式

https://www.jianshu.com/p/222b0cd0f8a8

背景
   前端上传文件【包含图片、视频等资源文件】是相当常见的场景，作为一名前端开发人员你会遇到后端接收文件的多种方式，以及前端不同场景下的生成的不同文件上传格式。

上传方式
   1、表单上传方式【最场景、最简单的方式】

上面的是挺简单的，but 刷新了，这个体验大多数场景中让人接受不了，最简单的处理方式设置submit 返回 false;

   2、表单升级版 【formData】    有些场景中我们不一样会使用form，或者说不想用，那么formData就是一个很好的选择了，首先刷新问题是肯定没有了，而且看上逼格更高。

// 这里使用vue写法

<button type="default" @click="uploadFile">formData上传

// js
let file = document.getElementById('file');
let formData = new FormData();
formData.append('file', file.files[0])
   3、formData 上传 blob 图片

let formData = new FormData();
formData.append('file', blob, Date.now() + '.png'); // 需要指定第三个参数
   4、formData 上传 base64 图片； // 一般是把base64转blob在上传

convertBase64UrlToBlob(urlData) {
let bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: 'image/png' });
}

let formData = new FormData();
formData.append('file', this.convertBase64UrlToBlob(data), Date.now() + '.png'); // 需要指定第三个参数
总结
   其他方式欢迎留言探讨， 上面大部分写法是直接用vue的方式，其实都差不多哈。

1人点赞
vue开发

作者：Jabo
链接：https://www.jianshu.com/p/222b0cd0f8a8
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。