微信开发-eggjs后台上传素材

最近在研究微信开发，做了一个平台，但是上传素材至微信服务器频频出现问题，各种尝试后，最终解决了，特此记录下。

话不多说上代码：

前端代码

前端采用 element-ui/el-upload

<el-upload
  action="/dev-api/upload"
  :file-list="form.thumb"
  name="media"
  list-type="picture-card"
  :auto-upload="true"
  :headers="headerObj"
  :on-change="handleChange"
>
  <i slot="default" class="el-icon-plus" />
  <div
    slot="file"
    slot-scope="{ file }"
    class="thumb-img"
    :style="'background-image: url(' + file.url + ')'"
  >
    <span class="el-upload-list__item-actions">
      <span
        class="el-upload-list__item-delete"
        @click="handleRemove(file)"
      >
        <i class="el-icon-delete" />
      </span>
    </span>
  </div>
</el-upload>

效果：

后台代码

后端采用egg.js

• config/config.default.js

multipart: {
   mode: 'file',
   fileExtensions: [ '.jpg', '.jpeg', '.png' ],
 },
 security: {
   csrf: {
     // 判断是否需要 ignore 的方法，请求上下文 context 作为第一个参数
     ignore: ctx => isInnerIp(ctx.ip),
   },
 },

• controller/upload.js

// UploadController方法

// 引入库
const formstream = require('formstream');

// 获取token
const access_token = await service.weixin.token(settingOne);

// 文件处理
const file = ctx.request.files[0];
const imgbase64 = await fs.readFileSync(file.filepath, 'base64');
const dataBuffer = Buffer.from(imgbase64, 'base64');

const form = formstream();
form.buffer('media', dataBuffer, file.filename, file.mime);

// 上传至微信服务器 - 新增永久素材
const { data: result } = await ctx.curl(`https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=${access_token}&type=image`, {
  method: 'post',
  headers: form.headers(),
  stream: form,
  dataType: 'json',
});

if (result.errcode) return ctx.helper.error(ctx, 500, result);
 ctx.helper.success(ctx, null, '上传成功');

大功告成！撒花💖