最简单的方法教你如何利用vue3的el-upload组件上传头像到本地后端（axios的 ...

   研究了好一阵子，踩了无数的坑，查阅了很多的博客，ai也用了，最后做出来了，保准清楚明白的告诉你你必要什么就可以实现这个功能。
前端方面

1.首先是组件的利用

  这里发起利用组件库里的代码，这一篇重要讲最关键的点，下一篇会讲el-upload怎么调整

1. <!-- 上传头像 -->
2.         <el-upload
3.           action="#"  //自定义请求
4.           :before-upload="beforeUpload"  //请求之前做的事
5.           :http-request="uploadFile"  //请求方法
6.         >
7.         </el-upload>

复制代码

  最关键的就是这三个，可以说组件这里设置好了这三个，前端就可以了
2.内容方面

2. //上传用户头像涉及的变量
3. let FormDatas = reactive(""); //上传给后端的变量
5. // 上传之前，这里差不多照抄即可
6. const beforeUpload = (rawFile) => {
7.   //这里设置上传图片类型和限制大小
8.   if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
9.     ElMessage.error("头像必须是jpg或png格式！");
10.     return false;
11.   } else if (rawFile.size / 1024 / 1024 > 5) {
12.     ElMessage.error("头像过大！");
13.     return false;
14.   }
15.   return true;
16. };
18. // 上传头像
19. const uploadFile = async (item) => {
20.   //上传头像的处理
21.   FormDatas = new FormData();
22.   FormDatas.append("file", item.file);
23. };

复制代码

  这里讲一下上传头像，必要转换成FormData格式，这一点很关键，然后这个FormDatas就是我要传给后端的东西，就是上传的内个文件，这里是全局变量
  还有注意一下这里的这个append的键“file”
3.发送请求和一些逻辑

1. //这里是我的表单点击提交之后的逻辑
2. //先请求
3. let uploadMsg = await proxy.$api.upload(FormDatas);
4. //拿到数据之后给表单里的avatar赋值成链接，这部分之后是更新用户信息的请求
5. if (uploadMsg) {
6.   userForm.avatar = uploadMsg.data;
7. }
9. //上传头像的请求（可能不需要设置headers，但是我加上了）
10.   upload(params) {
11.     return request({
12.       headers: { "Content-Type": "multipart/form-data" },
13.       url: "/upload/img",
14.       method: "post",
15.       data: params,
16.     });
17.   },

复制代码

这部门是大家本身的逻辑代码，就是带着这个数据去请求然后能拿返来一个图片地址
后端方面

  这里比较关键，因为我对后端不相识，所以基本查阅的资料都是关于后端koa框架的，真的踩了很多坑！
1.首先是app.js内里

1. const bodyparser = require("koa-bodyparser");
3. // middlewares
4. app.use(
5.   bodyparser({
6.     enableTypes: ["json", "form", "text"],
7.   })
8. );

复制代码

  这里着实用这个中间件就可以分析，不必要加任何额外的中间件，尤其是koa-body！！！
  尤其是koa-body！！！一查博客全都告诉你加koa-body分析formdata数据，确实能分析了，但是存到了ctx.request.files内里！你的koa-multer就不见效了！真的很坑！
2.upload.js文件

1. //这里没什么好说的，照抄即可，是根据日期创建文件夹和文件名称
2. let storage = multer.diskStorage({
3.   //设置文件存储位置
4.   destination: function (req, file, cb) {
5.     let date = new Date();
6.     let year = date.getFullYear();
7.     let month = date.getMonth() + 1;
8.     let day = date.getDate();
9.     let dir = "./public/uploads" + year + month + day;
11.     //如果没有文件夹就创建文件夹
12.     if (!fs.existsSync(dir)) {
13.       fs.mkdirSync(dir, {
14.         recursive: true,
15.       });
16.     }
18.     cb(null, dir);
19.   },
21.   filename: function (req, file, cb) {
22.     //设置文件名称
23.     let filename = Date.now() + path.extname(file.originalname);
24.     cb(null, filename);
25.   },
26. });
28. let upload = multer({ storage });
30. //上传图片的接口
31. router.post("/img", upload.single("file"), async (ctx) => {
32.   let path = ctx.req.file.path;
33.   path = ctx.origin + "" + path.replace("public", "");
34.   if (path) {
35.     ctx.body = {
36.       code: 200,
37.       msg: "上传成功！",
38.       data: path,
39.     };
40.   } else {
41.     ctx.body = {
42.       code: 400,
43.       msg: "上传出现异常！",
44.     };
45.   }
46. });

复制代码

  注意一下上传图片接口里的upload.single("file")，这里要和前端append的名字对上，然后你就可以从ctx.req内里拿到file，大家可以自行打印，然后这里是把图片存到了后端项目标一个文件内里，启动后端之后就可以通过后端服务器的地址访问这个图片，然后数据库存的是这个地址（后面有图）
  还有req和request不是一个东西！
  所以我可能是这个地方没对上（当时某一个用的myfile），绕了一大圈子（痛！太痛了！）
  下一篇讲一下设置el-upload
附带的加强明白的点

  1.前端根据后端返回的path放图的代码

1. <img :src="picture" alt="" />
3. // 头像，如果上传了就从store里面拿，没上传就是默认的
4. const picture = computed(() => {
5.   return userMsgStore.userMsg.avatar == ""
6.     ? "src/assets/imgs/defaultImg.png"
7.     : userMsgStore.userMsg.avatar;
8. });

复制代码

  2.上传到数据库的地址

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。