上传码云_vue-egg 简单的图片上传

源码已上传码云：小朋友/vue-egg 简单的图片上传

知乎视频​www.zhihu.com

VSCode终端不能使用命令 - 惟愿安好ly - 博客园​www.cnblogs.com

上传用的是 iview.design 的 Upload 组件

目录

• fs 管道流
• Promise 以及 async/await 解决异步的问题
• base64 编码保存图片的优缺点

一、fs 管道流

读 --> 写

const s_in = ctx.getFileStream();
const filename = s_in.filename;
const s_out = fs.createWriteStream(path.join(this.config.baseDir, `app/public/images/${filename}`));
s_in.pipe(s_out);

二、Promise 以及 async/await 解决异步的问题

下面是 fs.unlink(src, func) 删除文件，本身就是异步的所以无法检测到是否删除成功，所以通过 Promise 来进行处理（最后把 code 返回前端，标志着是否删除成功）。

class HomeController extends Controller {
  async delImage(){
    const { ctx } = this;
    const { filename } = ctx.query;
    let code;
    const promise = new Promise((resolve, reject) => {
      fs.unlink(`app/public/images/${filename}`, err => {
        if(err) {
          reject(err);
        } else {
          resolve();
        }
      });
    });
    await promise.then(() => {
      code = 200;
    }, () => {
      code = 403;
    });
    ctx.body = {
      code,
    };
  }
}

三、base64 编码保存图片的优缺点

1. 优势

减少 http 请求；

模块封装；

2. 弊端

base64 编码保存的文件比较大；

获取修改比较麻烦；

3. 适用场景

图片很少或不会更新；

图片实际尺寸很小；

图片在网站多次使用；

生活苦涩

---

叄贰壹的博客_CSDN博客-渗透测试,java基础,leetcode领域博主​blog.csdn.net

带只拖鞋去流浪 - 简书​www.jianshu.com

警告

商业转载请联系本人，非商业转载请注明出处。