egg上传图片，搭配vue后台管理

1.element的upload组件

<el-upload  //其他参数自行element
        action="/api/upimg"  //请求接口  记得配置代理
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handok"  //上传成功回调
        :limit="num"
        class="upload"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
<!-- 查看图片的遮罩 -->
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>

2.methods 方法

handok(response, file, fileList) {
      console.log(file, fileList);
      this.blobToDataURL(file.raw, file.uid);
      this.pnum = fileList.length;
    },
    blobToDataURL(blob, id) {
      var a = new FileReader();
      const that = this;
      a.readAsDataURL(blob);
      a.onload = function(e) {
//发送之前 处理base64
        const result = e.target.result.replace(/^data:image\/\w+;base64,/, "");
        // console.log(result);
        //
        post("/api/upimg", { //往egg后台传的参数
          base64: result,
          id //id是唯一的 用于图片命名
        }).then(res => {
          console.log(res);  //接收egg返回的真实图片地址
          that.imgarr.push(res)
        });
      };
    },

3.egg后台有一个坑

如果直接发起请求 把base64码发送，会提示403 负荷过大，因为base64超级长，占位特大，而egg有限制上传的大小，需要单独设置egg的配置

// config/config.default.js
const config = exports = {
    bodyParser: {//解除大小
      jsonLimit: '100mb',
      formLimit: '100mb',
    },
  };

4.egg接收到处理后的base64，再次处理

在Service层的js里
参数data就是接收的参数，在第二步里可以看到传的参数
将base64处理成Buffer
再通过fs模块写入本地public文件夹下，用接收的id命名
最后将上传的图片最终地址返回回去

const Service = require('egg').Service;
const fs = require('fs');
class Upimg extends Service {
    upimg(data) {
        const { app } = this;
        // return data
        var dataBuffer = Buffer.from(data.base64 + "", 'base64');
        fs.writeFile(`app/public/${data.id}.png`, dataBuffer, function (err) {
            if (err) {
                console.log(err)
            }
        });
        return `http://localhost:7001/public/${data.id}.png`
    }
}

module.exports = Upimg;

---

总结：

element的上传组件可以直接拿到上传后的File文件，

image.png

var a = new FileReader();
      a.readAsDataURL(File文件);  //处理File
      a.onload = function(e) {
        const result = e.target.result.replace(/^data:image\/\w+;base64,/, "");   //截取掉前边
        post("/api/upimg", {
          base64: result,
          id
        }).then(res => {
          console.log(res);
        });
      };

处理完File发送后台，后台接收再次处理，转为Buffer格式

Buffer.from(接收到的参数 + "", 'base64');

最后fs模块写入文件夹，通过return从service返回到Controller，再ctx.body输出到前台请求res中

完。