最简单的方法教你如何使用vue3的el-upload组件上传头像到本地后端（axios的post请求），使用koa-multer把图片存储到自定义位置并且返回图片地址（附带源码）

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

前端方面

1.首先是组件的使用

  这里建议使用组件库里的代码，这一篇主要讲最关键的点，下一篇会讲el-upload怎么调整

  最关键的就是这三个，可以说组件这里设置好了这三个，前端就可以了

2.内容方面

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

  这里讲一下上传头像，需要转换成FormData格式，这一点很关键，然后这个FormDatas就是我要传给后端的东西，就是上传的内个文件，这里是全局变量

  还有注意一下这里的这个append的键“file”

3.发送请求和一些逻辑

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

这部分是大家自己的逻辑代码，就是带着这个数据去请求然后能拿回来一个图片地址

后端方面

  这里比较关键，因为我对后端不了解，所以基本查阅的资料都是关于后端koa框架的，真的踩了很多坑！

1.首先是app.js里面

const bodyparser = require("koa-bodyparser");// middlewaresapp.use(  bodyparser({    enableTypes: ["json", "form", "text"],  }));

  这里其实用这个中间件就可以解析，不需要加任何额外的中间件，尤其是koa-body！！！

  尤其是koa-body！！！一查博客全都告诉你加koa-body解析formdata数据，确实能解析了，但是存到了ctx.request.files里面！你的koa-multer就不生效了！真的很坑！

2.upload.js文件

//这里没什么好说的，照抄即可，是根据日期创建文件夹和文件名称let storage = multer.diskStorage({  //设置文件存储位置  destination: function (req, file, cb) {    let date = new Date();    let year = date.getFullYear();    let month = date.getMonth() + 1;    let day = date.getDate();    let dir = "./public/uploads" + year + month + day;    //如果没有文件夹就创建文件夹    if (!fs.existsSync(dir)) {      fs.mkdirSync(dir, {        recursive: true,      });    }    cb(null, dir);  },  filename: function (req, file, cb) {    //设置文件名称    let filename = Date.now() + path.extname(file.originalname);    cb(null, filename);  },});let upload = multer({ storage });//上传图片的接口router.post("/img", upload.single("file"), async (ctx) => {  let path = ctx.req.file.path;  path = ctx.origin + "" + path.replace("public", "");  if (path) {    ctx.body = {      code: 200,      msg: "上传成功！",      data: path,    };  } else {    ctx.body = {      code: 400,      msg: "上传出现异常！",    };  }});

  注意一下上传图片接口里的upload.single("file")，这里要和前端append的名字对上，然后你就可以从ctx.req里面拿到file，大家可以自行打印，然后这里是把图片存到了后端项目的一个文件里面，启动后端之后就可以通过后端服务器的地址访问这个图片，然后数据库存的是这个地址（后面有图）

  还有req和request不是一个东西！

  所以我可能是这个地方没对上（当时某一个用的myfile），绕了一大圈子（痛！太痛了！）

  下一篇讲一下设置el-upload

附带的加强理解的点

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

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

  2.上传到数据库的地址