vue3+koa实现文件上传功能的全过程记录

     <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="/api/article/upload"
            :limit="1"
            :on-remove="handleRemove"
            :on-change="handlePreview"
            :on-success="handleSuccess"
            list-type="picture"
            :headers="{ Authorization: headers }"
            accept="image/jpeg,image/png"
          >
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template>
          </el-upload>

 action="/api/article/upload" // 向该目录下发送接口 
 :on-remove="handleRemove"   //删除图片触发的回调事件
 :on-change="handlePreview"  //触发图片新增之类的修改触发的回调事件
 :on-success="handleSuccess" //向action路径下发送接口请求的响应的回调函数
 :headers="{ Authorization: headers }" // 向请求头携带字段，因为我这里使用了Token,需要在请求前携带Authorization
 accept="image/jpeg,image/png"//接受的文件类型方便挑选。

   const handleSuccess = (response) => { 
      console.log(response.data, "--------");
      imgPath.value = response.data;
    };

app.use(koabody({
  multipart: true, //开启文件上传 
  formidable: { // 路径配置
    // 在配置选项option 不推荐使用相对路径
    uploadDir: path.join(__dirname, './upload'),  //配置保存路径
    keepExtensions: true //保存文件扩展名
  }
}))

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

    // console.log(ctx.request.files, "ctx.request.files")
    const { file } = ctx.request.files;
    const fileTypes = ["image/jpeg", "image/png"]
    if (file) {
        if (fileTypes.includes(file.type)) {
            ctx.body = util.success({ imgName: file.name, imgBathPath: path.basename(file.path) }, "上传成功")
        } else {
            ctx.body = util.fail("上传图片非jpg 和 png 格式")
        }

    } else {
        ctx.body = util.fail('上传出错')
    }

    // ctx.body = util.success(ctx.request.files.file.path, "上传成功")
})

app.use(koaStatic(path.join(__dirname, './upload')))//开启静态资源访问

const mongoose = require('mongoose')
const articleSchema = mongoose.Schema({
    articleTitle: String,   // 文章标题
    articleType: String,   // 文章类型
    articleContent: String, // 内容，富文本
    publishState: Number,  // 发布状态 0 未发布 1 已发布 2已删除
    articleAuth: String,
    imgPath: {
        imgName: String,
        imgBathPath: String,
    },
    applyUser: {
        userId: String,
        userName: String,
        userEmail: String
    },
    publishTime: { type: Date, },
    createTime: { type: Date, default: Date.now } // 创建事件
})

module.exports = mongoose.model("article", articleSchema, "article")

  const handleView = (row) => {
      action.value = "view"; // 设置action状态，用来判断disable条件
      let data = { ...row }; //遍历弹窗数据

      // 将文本编辑器设置为只读
      // const editor = editorRef.value;
      // editor.disable();

      // 填充富文本到富文本编辑器中
      articleContent.value = data.articleContent;

      // 处理图片的回显
      const temp = {
        name: data.imgPath.imgName,
        url: "http://localhost:3000/" + data.imgPath.imgBathPath,
      };

      fileList.value.push(temp);
      console.log(fileList.value, "fileList.value");
      articleForm.value = data;
      showModal.value = true;
    };

app.use(koajwt({ secret: 'secret' }).unless({
  // 过略一些不需要token的接口
  // 过略掉除了 登录接口 和 非api接口(主要为静态资源请求接口)
  path: [/^\/api\/users\/login/, /^((?!\/api).)*$/],

})) // 使用中间件进行token拦截

    proxy: {
      //拦截以api开始的请求，将/api 替换成http://localhost:3000， 浏览器同源策略，无法在前端 port:8080 访问后端 prot:3000 端口，需要借助代理拦截请求，进行接口转发
      "/api": {
        target: "http://localhost:3000"
      }
    }

     "/": {
        target: "http://localhost:3000"
      },