js 获取h5 header token_vue + nodejs + psd.js 轻松入门-CSDN博客

本文链接：https://blog.csdn.net/weixin_32466167/article/details/113084780

本文介绍了如何在H5项目中使用Vue、Node.js和psd.js实现PSD文件导入，帮助非程序员团队成员轻松配置交互式H5。通过Vue的表单上传，Node.js结合psd.js解析PSD，并利用connect-multiparty处理文件，以及request-promise处理流传输。尽管psd.js存在对大型文件和复杂图层处理的限制，但该解决方案提高了团队效率。

摘要由CSDN通过智能技术生成

最近在开发一个自定义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，过大会导致浏览器卡顿甚至卡死
尽可能合并图层，并栅格化所有图层
较复杂的图层样式，如滤镜、图层样式等无法读取