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中
完。
