前端文件上传多种方式

背景

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

上传方式

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

<form action="后端接收地址" method="post">
    <input type="file" name="file" />
    <input type="submit" value="Submit" />
</form>

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

<form method="post" onsubmit="return false; ">
    <input type="file" name="file" />
    <input type="submit" value="Submit" />
</form>

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

// 这里使用vue写法
<input id="file" type="file" name="file" />
<button type="default" @click="uploadFile">formData上传</button>

// 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的方式，其实都差不多哈。