vue3 + elementplus + koa2 + formData实现文件上传

大概思路

1、前端：使用formData（不会的话可以百度使用方式），将上传的文件和要传送到后台的其他数据一起放入formdata，请求后台接口的时候，参数为formdata即可

2、后台服务器：接收前端传输过来的数据，文件和其它数据要分开接收。这里涉及两个操作：①将文件写入文件夹②更新数据库

1、前端页面

<el-upload

                  class="avatar-uploader"

                  action="https://jsonplaceholder.typicode.com/posts/"

                  :show-file-list="false"

                  list-type="picture-card"

                  :on-success="handleAvatarSuccess"

                  :before-upload="beforeAvatarUpload"

                >

                <!--上传图片之后图片预览-->

                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />

                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                </el-upload>

//新增用户上传头像成功

    const handleAvatarSuccess = (res, file) => {

      console.log(file)

      imageUrl.value = URL.createObjectURL(file.raw);

      files.value = file.raw;

      // console.log(imageUrl.value,"新增上传的头像",file.raw,"文件")

    };

//新增用户获取用户头像和用户信息

    const getImg = (val) => {

      let formData = new FormData();

      if(files.value){

        formData.append("file", files.value);//获取文件信息

        // console.log("上传文件了",files.value);

       }

      if(val == 0){

        formData.append("userInfo", JSON.stringify(state.form));//把新增的用户信息装进去一并传到后台，对象要序列化，不然后台很可能取不到值

      }else{

        formData.append("userInfo", JSON.stringify(state2.form2));

      }

      // console.log("表单的值",state2.form2);

      return formData;

    }

    //点击新增请求接口

     const getForm = () => {

      const formData = getImg(0);

      state.dialogFormVisible = false;

      request.request({

        url:'/api/user/addUser',

        method:'post',

        data:formData,

         //这一句一定不能掉，要不然后台无法解析

         headers:{'Content-Type':'multipart/form-data'}

      }).then(res => {

                //处理结果

        }else{

             

      })

      

2、Koa2后台服务器接口

(1)准备工作（app.js当中）

const koaBody = require('koa-body'); //解析上传文件的插件

//处理静态资源文件

// const views = require("koa-views");

const serve = require("koa-static");  // npm install --save koa-static

const mount = require("koa-mount"); //npm install koa-mount

//koa-mount帮助文档链接：Koa挂载到特定路径 koa-mount 帮助文档

app.use(koaBody({

    multipart: true,

    formidable: {

        maxFileSize: 2000 * 1024 * 1024    // 设置上传文件大小最大限制，默认2M

    }

}))

//不将根暴露出去，暴露upload文件

app.use(mount('/upload',serve(path.join( __dirname,'./upload'))));

2、接口

const fs = require('fs');

//管理员新增用户

router.post('/addUser',async(ctx) => {

    let file = ctx.request.files.file;

    let addUserInfo = JSON.parse(ctx.request.body.userInfo);

    //查询用户是否存在

    const project = await userModel.findOne({

        where: {

          username:addUserInfo.username,

          password: addUserInfo.password

        }

      });

    if(project===null){

        if(file != null){

            // 创建可读流

            const reader = fs.createReadStream(file.path);

            const fileResource = process.cwd()+'/upload' + `/${file.name}`;

            // 创建可写流

            const upStream = fs.createWriteStream(fileResource);

            // 可读流通过管道写入可写流

            reader.pipe(upStream);

        }

        const newUser = await userModel.create({ 

            headPic:file.name,//数据库只存图片的名字

            username: addUserInfo.username,

            password: addUserInfo.password,

            role: addUserInfo.role,

            status: addUserInfo.status,

        });

        if(newUser){

            ctx.body=formatResponse("200",newUser,"success");

        }else{

            ctx.body=formatResponse("500",{msg:"新增失败！"},"fail");

        }

    }else{

        ctx.body=formatResponse("500",{msg:"该用户已存在！"},"fail");

    }

});

最后，在上传多个文件可能会出现的问题

上传多个文件，可以用遍历的方式，一个一个加进去

this.files.forEach(item => {

            formData.append("file", item);

 });