Vue3+Koa2实现图片上传+删除

Vue3+Koa2 node实现图片上传 vue前端 node后端上传图片 vue3

<el-upload
    v-model:file-list="fileList"
    action="http://localhost:3000/api/friedChickensImg"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
# </el-dialog>



<script setup>
const fileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  
])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
</script>

node 后端

const Koa = require("koa");
const Router = require("koa-router");
const multer = require("@koa/multer");

const app = new Koa();
const router = new Router();

// 配置multer中间件
const upload = multer({
    storage: multer.diskStorage({
        //文件上传保存的路径
        destination: function (req, file, cb) {
            let dir = "./public/images"
            // 查看是否存在，不存在就创建
            if (!fs.existsSync(dir)) {
                fs.mkdirSync(dir, {
                    recursive: true
                })
            }
            // 这里的路径必须要存在
            cb(null, dir)
        },
        //修改文件名称
        filename: function (req, file, cb) {
            const fileName = file.fieldname + "-" + Date.now() + path.extname(file.originalname)
            cb(null, fileName)
        }
    })
})

// 编写图片上传的接口
router.post('/uploads', upload.single('files'), async ctx => {
    const filename = ctx.request.file.filename
    path = ctx.request.origin + '/images/' + filename
    // 这里可以去操作数据库把我们的url存入数据库中方便使用。
    ctx.body = {
        code: 200,
        message: '图片上传成功',
        url: path
    }
})
......
......
app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
    console.log('This is port 3000...')
})

删除

deleteFolderRecursive(url, name) {
        var files = [];

        if (fs.existsSync(url)) {    //判断给定的路径是否存在

            files = fs.readdirSync(url);    //返回文件和子目录的数组

            files.forEach(function (file, index) {

                var curPath = path.join(url, file);

                if (fs.statSync(curPath).isDirectory()) { //同步读取文件夹文件，如果是文件夹，则函数回调
                    deleteFile(curPath, name);
                } else {

                    if (file.indexOf(name) > -1) {    //是指定文件，则删除
                        fs.unlinkSync(curPath);
                        console.log("删除文件：" + curPath);
                    }
                }
            });
        } else {
            console.log("给定的路径不存在！");
        }
    }

安装 sharp 后运行报错问题

Could not load the "sharp" module using the darwin-x64 runtime Possible solutions:

node 版本必须在 一下版本中安装
^18.17.0 || ^20.3.0 || >=21.0.0 
npm install --arch=x64 sharp

const sharp = require('sharp');
 
// 图片路径和输出路径
const inputImagePath = 'path/to/input/image.jpg';
const outputImagePath = 'path/to/output/image.jpg';
 
// 压缩图片
sharp(inputImagePath)
  .resize(2000, 2000) // 设置图片最大宽度和高度
  .jpeg({ quality: 80 }) // 设置JPEG质量
  .toFile(outputImagePath)
  .then(() => {
    console.log('图片压缩成功！');
  })
  .catch(err => {
    console.error('图片压缩失败: ', err);
  });