为什么会有这样的需求呢！今天测试提了个霸哥，在上传文件的时候我把电脑上源文件进行重命名这个时候会上传不成功，不行我不能做（我撕也不做）去找需求需求来了句这是我给你的挑战(万马飞奔 场面顿时在眼前、这时候我撇了下钱包。忍)。
场景
由于我们采用的是手动上传，我在选取文件完毕之后。手动上传到服务器--会再点击上传到服务器 按钮时候传递文件流。
问题
我在选取完文件的时候取到文件流把他存放到变量中 再点击上传到服务器取到文件流 上传
- 对电脑源文件进行重命名。
- 对电脑源文件进行删除
由于需要考虑兼容问题 这里测试的是 谷歌与火狐浏览器 ===> 谷歌浏览器会在点击上传前就已经判断文件异常了，火狐会将一部分的文件流传递给后端 但这个文件流并不是完整的后端会报错 （废话少说 上代码）
// 界面 ----------
<el-upload
class="upload-demo"
action=""
:on-change="handleChange"
:multiple="false"
>
<el-button slot="trigger" size="small" type="primary"
>选取文件</el-button
>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="submitUpload"
>上传到服务器</el-button
>
</el-upload>
// js ----------
handleChange(file) {
// 使用 FileReader 来读取文件
this.reader = new FileReader();
// 读取二进制文件
this.reader.readAsArrayBuffer(file.raw);
// 获取读取成功后的文件
this.reader.onload = function () {
this.obled = this.result;
};
},
submitUpload() {
// 我们使用的是 post 搭配 formData 格式传参 需要注意转换文件流
let formData = new FormData();
formData.append("file", new Blob([this.obled]));
console.log(formData.get("file"), "上传的文件");
setTimeout(function () {
console.log(`模拟请求`);
this.obled = null;
this.reader = null;
}, 100);
// axios({
// method: 'post',
// url: api,
// data: formData,
// }).then((res) => {
// });
}
当然 已经测试过 谷歌目前上传800M是没有问题的
但我想知道上限是多大 这个时候我又开始找度娘 --> 贺老的乎乎 （侵权请大佬们踢我一下）
存在问题 -- 待续
所以我将前端上限限制到了1G （在上传的同时 读取到的文件会缓存到内存中，这个时候建议打开任务管理器观察一下 : 上传完毕之后依旧占用内存-- 目前正在解决占用问题 欢迎大佬执教能力到此了不能放弃我在解决问题先记录下成功的 ）
必成功方法
其实还有第二个方法 前端在选取文件之后生成 id 然后把文件发到服务器 这时候在点击上传的传id 去查找这个文件 （刚开始老大建议更换组件 -- antd elmentui 原生 都不行 其实方向就错了）
欢迎提出建议
---记录旅行遇到的事迹 -用于旅行记录 欢迎志同道合的朋友
