在 vue3 中通过 element-plus 的上传组件实现文件上传

import { ref } from 'vue'
const imageUrl = ref('')
const handleSuccess = (response, file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
}
<el-upload action="http://127.0.0.1:7001/upload"
             :show-file-list="false"
             :on-success="handleSuccess">
    <img v-if="imageUrl"
         :src="imageUrl"
         class="avatar" />
    <div v-else>
      <i class="el-icon-plus avatar-uploader-icon"></i>
      <div class="el-upload__text">点击上传封面</div>
    </div>
    <template #tip>
      <div v-if="!imageUrl"
           class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
    </template>
  </el-upload>

// file模式
// default.config.js 
// 解析文件上传
  config.multipart = {
    mode: 'file', // file / stream
  };
// 将上传的文件存入到文件中
// file
const { ctx } = this;
const file = ctx.request.files[0];
// console.log(file);
const readStream = fs.createReadStream(file.filepath);
const writeStream = fs.createWriteStream(path.join(__dirname,`../public/${file.filename}`));
readStream.pipe(writeStream);
//将上传的文件存入文件中
// stream模式
const stream = await ctx.getFileStream();
const writeStream = fs.createWriteStream(path.join(__dirname, `../public/${stream.filename}`));
stream.pipe(writeStream);