支持gif

api/file/file.controller.js

@@ -79,19 +79,27 @@ module.exports.getByThemeId = (req, res) => {
 
 // Creates a new File in the DB
 module.exports.create = (req, res) => {
-  var imageInfo = buildImgPath(req.body.themeId || 'all')
-  if (req.body.imgData) {
-    tools.base64ToImg(req.body.imgData, imageInfo.imagePath)
-    req.body.filePath = imageInfo.accessPath
+  if (!req.files) {
+    return res.status(400).send('No files were uploaded.');
+  }
+  let image = req.files.image;
+  var pathInfo = buildImgPath(req.body.themeId || 'all')
+  if (image) {
+    var ext = '.' + image.mimetype.split('/')[1]
+    image.mv(pathInfo.imagePath + ext, err => {
+      if (err) {
+        return res.status(500).send(err);
+      }
+      return File.create({filePath: pathInfo.accessPath + ext})
+      .then(respondWithResult(res, 201))
+      .catch(handleError(res))
+    })
   }
-  return File.create(req.body)
-    .then(respondWithResult(res, 201))
-    .catch(handleError(res))
 }
 
 const buildImgPath = (themeId) => {
   // 文件使用uuid生成别名
-  var fileName = uuid.v1().replace(/-/g, '') + '.png'
+  var fileName = uuid.v1().replace(/-/g, '')
   // 文件目录
   var dirPath = 'public/upload/' + themeId
   // 图片保存路径

app.js

@@ -13,6 +13,7 @@ var bodyParser = require('body-parser')
 var mongoose = require('mongoose')
 var ejs = require('ejs')
 var config = require('./config')
+var fileUpload = require('express-fileupload')
 mongoose.Promise = require('bluebird')
 
 mongoose.connect(config.mongo.uri, { user: config.mongo.user, pass: config.mongo.pass })
@@ -46,11 +47,12 @@ app.all('*', function (req, res, next) {
 // uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(logger('dev'))
-app.use(bodyParser.json({ 'limit': '2000kb' }))
+app.use(bodyParser.json({ 'limit': '20000kb' }))
 app.use(bodyParser.urlencoded({ extended: false }))
 app.use(cookieParser())
 app.use(express.static(path.join(__dirname, 'public')))
 app.use(express.static(path.join(__dirname, 'webapp/dist')))
+app.use(fileUpload())
 require('./routers')(app)
 
 // error handler

package.json

@@ -12,39 +12,40 @@
     "webapp": "cd webapp && node build/dev-server.js"
   },
   "dependencies": {
+    "animate.css": "^3.5.2",
     "art-template": "^3.0.3",
+    "axios": "^0.15.3",
     "bluebird": "^3.4.6",
     "body-parser": "~1.15.2",
     "composable-middleware": "^0.3.0",
     "cookie-parser": "~1.4.3",
     "debug": "~2.2.0",
     "ejs": "^2.5.3",
+    "element-ui": "^1.3.3",
     "express": "~4.14.0",
+    "express-fileupload": "^0.4.0",
     "express-jwt": "^5.1.0",
     "fast-json-patch": "^1.1.1",
+    "fastclick": "^1.0.6",
+    "github-markdown-css": "^2.4.1",
     "hbs": "~4.0.1",
     "jsonwebtoken": "^7.1.9",
     "less-middleware": "~2.2.0",
+    "lrz": "^4.9.40",
+    "marked": "^0.3.6",
     "mkdirp": "^0.5.1",
+    "moment": "^2.15.2",
     "mongoose": "^4.6.5",
     "morgan": "~1.7.0",
     "node-uuid": "^1.4.7",
-    "serve-favicon": "~2.3.0",
-    "animate.css": "^3.5.2",
-    "axios": "^0.15.3",
-    "element-ui": "^1.3.3",
-    "fastclick": "^1.0.6",
-    "github-markdown-css": "^2.4.1",
-    "lrz": "^4.9.40",
-    "marked": "^0.3.6",
-    "moment": "^2.15.2",
     "qrcode": "^0.8.1",
+    "serve-favicon": "~2.3.0",
     "vue": "^2.3.3",
     "vue-router": "^2.5.3",
     "vuex": "^2.3.0"
   },
   "devDependencies": {
-    "eslint-plugin-html": "^1.5.5",
+    "eslint-plugin-html": "^1.3.0",
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.0.0",
     "babel-eslint": "^7.0.0",
@@ -65,7 +66,6 @@
     "eslint-config-standard": "^6.1.0",
     "eslint-friendly-formatter": "^2.0.5",
     "eslint-loader": "^1.5.0",
-    "eslint-plugin-html": "^1.3.0",
     "eslint-plugin-promise": "*",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",

util/tools.js

@@ -16,6 +16,17 @@ const base64ToImg = (imgData, filePath) => {
         })
     })
 }
+/**
+ * 获取上传文件后缀
+ * @param {*} imgData
+ */
+const getFileExt = (imgData) => {
+  if (imgData.indexOf('image/gif') > -1) {
+    return '.gif'
+  } else {
+    return '.png'
+  }
+}
 const renderFile = (filePath, data, successCallback) => {
     var rootPath = path.join(__dirname, '../views/')
     fs.readFile(rootPath + filePath, { flag: 'r+', encoding: 'utf8' }, function (err, result) {
@@ -44,5 +55,6 @@ const saveFile = (filePath, data, successCallback) => {
 module.exports = {
     base64ToImg,
     renderFile,
-    saveFile
-}
+    saveFile,
+    getFileExt
+}

webapp/src/components/Element/FontElement.vue

@@ -32,7 +32,7 @@
           textAlign: this.element['textAlign'],
           fontSize: this.element['fontSize'] + 'px',
           fontWeight: this.element['fontWeight'],
-          fontFamily: this.element['fontFamily'],
+          'font-family': this.element['fontFamily'],
           opacity: this.element['opacity'] / 100,
           transform: 'rotate(' + this.element['transform'] + 'deg' + ')'
         }

webapp/src/components/ImgPanel.vue

@@ -30,8 +30,9 @@ export default {
   },
   methods: {
     uploadImage (data) {
+      console.log(data, data)
       this.$store.dispatch('savePic', {
-        'imgData': data['base64'],
+        'filePath': data['filePath'],
         'themeId': this.themeId,
         'width': data['width'],
         'height': data['height']

webapp/src/components/PicturePicker.vue

@@ -18,31 +18,25 @@
 </style>
 
 <script>
-  import lrz from 'lrz'
+  import * as http from '../util/http'
+  import appConst from '../util/appConst'
   export default {
     methods: {
       fileChange (event) {
         let file = event.target.files[0]
         if (file) {
-          lrz(file, {quality: 0.5}).then(result => {
-            if (result.fileLen > 2 * 1024 * 1024) {
-              this.$message.error('请选择小于2M的文件')
-              return
-            }
-            // let reader = new window.FileReader()
-            // reader.onload = (ev) => {
+          const formData = new window.FormData()
+          formData.append('image', file)
+          http.post('/api/upload', formData).then(res => {
             let img = document.createElement('img')
-            let base64 = result.base64
             img.onload = () => {
               this.$emit('uploaded', {
-                'base64': base64,
+                'filePath': res.filePath,
                 'width': img.width,
                 'height': img.height
               })
             }
-            img.src = base64
-            // }
-            // reader.readAsDataURL(file)
+            img.src = appConst.BACKEND_DOMAIN + res.filePath
           })
         }
       }

webapp/src/views/spaeditor/index.vue

@@ -128,7 +128,7 @@
       },
       uploadImage (data) {
         this.$store.dispatch('savePic', {
-          'imgData': data['base64'],
+          'filePath': data['filePath'],
           'themeId': this.themeId,
           'width': data['width'],
           'height': data['height']

webapp/src/vuex/editor/actions.js

@@ -94,10 +94,7 @@ export const addBGElement = ({commit}, data) => {
  * @param data
  */
 export const savePic = ({commit}, data) => {
-  api.uploadPic(data).then((res) => {
-    // commit(types.SAVE_PIC, res)
-    commit(types.PUSH_PIC_LIST, res)
-  })
+  commit(types.PUSH_PIC_LIST, data)
 }
 /**
  * 清除背景