1.前端与后端文件上传的方式
1.formData传输
我们通过input获取的文件不能直接传给后端，需要转换为formData格式，才能正常上传文件
<template>
<div>
<input type="file" name="file" @change="handleChange" />
</div>
</template>
<script setup>
import axios from "axios";
const handleChange = (e) => {
let file = e.target.files[0]; //files[0]：数组的第一项为上传的值（单选）
let formdata = new FormData();
formdata.append("file", file); //第一个参数：文件的字段名，第二个参数：文件的值
axios.post("xxx", formdata);
};
</script>
2.base64传输
通过FileReader转换为base64的形式上传，这样方式前端可以做一些效果。例如预览图，缩略图等
<template>
<div>
<input type="file" name="file" @change="handleChange" />
</div>
</template>
<script setup>
const handleChange = (e) => {
let file = e.target.files[0];
let fs = new FileReader();
fs.readAsDataURL(file);
//在onload后才能拿到base64文件
fs.onload = () => {
let result = fs.result;
console.log(result);/result拿到后放到img中可以做预览图
};
};
</script>
2.多文件上传
加上multiple属性即可实现多文件上传，但是需要用户在选择界面按住Shift多选，这显然不符合用户的操作习惯，解决方案：我们可以将用户的每次选择保存下来，然后遍历上传，这样就可以在视觉上实现多文件上传了。
<template>
<div>
<input type="file" name="file" @change="handleChange" multiple />
<button @click="submit">上传</button>
</div>
</template>
<script setup>
import axios from "axios";
let fileList = [];
const handleChange = (e) => {
let file = e.target.files[0];
fileList.push(file);
};
const submit = () => {
fileList.forEach((item) => {
let formdata = new FormData();
formdata.append(item.name + "file", item);
axios.post("xxx", formdata);
});
};
</script>
3.切片上传
当文件大小比较大的时候，为了解决响应太慢的情况，我们可以使用切片上传,参考此文章 juejin.cn/post/744925…
