vue + nodejs + psd.js 轻松入门

最近在开发一个自定义H5项目，旨在提升团队效率，完全脱离程序员，让完全由不懂程序员的运营、设计等可独立配置H5，并实现大量交互的项目。

新的需求是要用户可以导入PSD，这样可以更加轻松的配置H5，而不用一张张图上传。

调研下来psd.js应该是您目前最好的选择

实现方法如下：

Vue

需要使用form表单上传

psdUploadFunc(event) {
    let form = new window.FormData();
    form.append('file', event.target.files[0])
    form.append('token', this.userInfo.api_token)
    axios.post(`${appConst.QA_DOMAIN}/psd`, form).then(res => {})
}
复制代码

Nodejs

加入psd.js依赖，并且提供接口来处理数据

var PSD = require('psd');
app.post('/psd', function (req, res) {
  var PSD = require('psd');
  PSD.open(req.files.file.path).then(function (psd) {
  })
});
复制代码

但是nodejs 获取不到input type='file'的值，需要引入中间件connect-multiparty

引入之后需要把生成的图片传给文件服务器 直接使用http.request会报错source.on is not a function，查其原因是因为需要使用流传输

这里我选择引入第三方库request-promise来解决

request.post({
    url: 'http://xxxxxxx/api/upload',
    headers: {
      'Authorization': 'Bearer ' + req.body.token
    },
    formData: {
      file: fs.createReadStream('./public/output' + i + '.png'),
    }
  })
复制代码

之后还需要遍历psd.layers处理

(async () => {
  let tree = await psd.tree().export().children
  for (let i = 0; i < psd.layers.length; i++) {
    await psd.layers[i].image.saveAsPng('./public/output' + i + '.png')
    await request.post({
        url: 'http://xxxxxxxx/api/upload',
        headers: {
          'Authorization': 'Bearer ' + req.body.token
        },
        formData: {
          file: fs.createReadStream('./public/output' + i + '.png'),
        }
      }).then(data => {
        tree[i].type = 'pic'
        tree[i].imgSrc = JSON.parse(data).data.filePath;
      }).catch(err => {
        res.send(err);
      });
    }
})();
复制代码

最后把获取的数据转义并返回给前端，中间还要倒序一下

res.send(
    tree.reverse()
);
复制代码

前端获取到数据后使用系统统一方法，遍历添加统一图片组件

for (let i = 0; i < res.data.length; i++) {
    this.$store.dispatch("addElement", res.data[i]);
}
复制代码

psd.js插件目前存在的问题：

• psd源文件大小最好不要超过30M，过大会导致浏览器卡顿甚至卡死
• 尽可能合并图层，并栅格化所有图层
• 较复杂的图层样式，如滤镜、图层样式等无法读取