vue3+egg.js+mongoDB实现图片上传和删除

• vue3+egg.js+mongoDB实现图片上传和删除

• 1.页面设计
  • 确定好布局，我是通过elelment-plus进行页面搭建，通过上传按钮显示子组件，也就是上一节父子传参用到的子组件，封装成组件是因为在后面的项目设计中会多次调用到该页面，方便调用。子组件布局的话是通过el-dialog包裹，设置上传图片的布局。图片上传思路的话是通过上传图片点击事件，复用该子组件，将图片可以进行分类，统一上传图片到一个数据库中，下面展示图片，通过点击选择需要的图片在点击底部的使用选中文件按钮获取选中图片的路径等信息传递给父组件，再渲染到指定地方，可以减少图片上传到数据库请求的操作，不用每次都上传新的图片。下面是存储图片的数据库的一个简单设计。

    

• 2.图片的上传和删除
  • （egg）在egg.js中写图片上传的接口，先要npm 安装path,pump,mkdirp,silly-datetime等，具体看代码,看会这里基本就没问题了就是接口的调用了。

    
    const Controller = require('egg').Controller
    
    const path = require('path');
    const fs = require('mz/fs');
    const pump = require('mz-modules/pump');
    const sd = require('silly-datetime');
    const mkdirp = require('mkdirp');
    class UploadController extends Controller {
      //上传图片保存路径并返回
      async uploadcinemaimg() { 
        const { ctx } = this;
        const file = ctx.request.files[0];
        // 1.获取当前日期
        let day = sd.format(new Date(), 'YYYY-MM-DD'); 
        // 2.创建图片保存的路径
        let dir = path.join(this.config.uploadcinemaimgDir, day);
      
        await mkdirp.sync(dir); // 不存在就创建目录
        let date = Date.now(); // 毫秒数
        // 获取文件名称
        const filename = file.filename;
        const targetPath = path.join(dir, date + filename);
        // 读取文件
        const source = fs.createReadStream(file.filepath);
        // 创建写入流
        const target = fs.createWriteStream(targetPath);
        try {
          await pump(source, target);
        } finally {
          await ctx.cleanupRequestFiles();
        }
        this.ctx.body = {
          data: {
            status: 200,
            message: '写入成功',
            data: targetPath.replace(/app/, '')//去除路径的前缀'/app/'
          }
        }
    
    
      }
      async delcinemaimg(){
        const { ctx } = this;
        const body = ctx.request.body;
        // 获取要删除文件的路径
        const filePath = path.join('app/', body.file);
        // 删除文件
        try {
          fs.unlinkSync(filePath);
          this.ctx.body = {
            data: {
              status: 200,
              message: '文件已成功删除',
            }
          }
        } catch(err) {
          this.ctx.body = {
            data: {
              status: 404,
              message: '删除失败',
            }
          }
        }
      }
    }
    
    module.exports = UploadController;
    

  • (vue)1.通过el-upload的上传文件上传图片到数据库，在通过on-success属性获取file值，可以获取到图片的信息和存贮在后端文件夹的路径

    

    • 2.通过接口保存到将图片信息重新保存到数据库中，再通过获取获取该数据库图片的接口，重新把新的数据渲染到页面。
    • 3.删除文件按钮，触发删除事件。即可将图片从目录中删除