修复上传图片无法按主题分类

api/file/file.controller.js

@@ -5,6 +5,8 @@ var jsonpatch = require('fast-json-patch')
 var File = require('./file.model')
 var tools = require('../../util/tools')
 var uuid = require('node-uuid')
+var fs = require('fs')
+var path = require('path')
 
 const respondWithResult = (res, statusCode) => {
   statusCode = statusCode || 200
@@ -90,7 +92,8 @@ module.exports.create = (req, res) => {
       if (err) {
         return res.status(500).send(err);
       }
-      return File.create({filePath: pathInfo.accessPath + ext})
+      console.log(req.body.themeId, 'themeId')
+      return File.create({filePath: pathInfo.accessPath + ext, themeId: req.body.themeId || ''})
       .then(respondWithResult(res, 201))
       .catch(handleError(res))
     })
@@ -102,6 +105,8 @@ const buildImgPath = (themeId) => {
   var fileName = uuid.v1().replace(/-/g, '')
   // 文件目录
   var dirPath = 'public/upload/' + themeId
+  // 创建路径
+  fs.existsSync(path.resolve(dirPath)) == false &&tools.mkdirs(dirPath)
   // 图片保存路径
   var imagePath = dirPath + '/' + fileName
   // 图片访问路径

util/tools.js

@@ -5,7 +5,7 @@ var fs = require('fs')
 var mkdirp = require('mkdirp')
 var path = require('path')
 var ejs = require('ejs')
-var fs = require('fs')
+var path = require('path');
 
 const base64ToImg = (imgData, filePath) => {
     var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "")
@@ -51,10 +51,17 @@ const saveFile = (filePath, data, successCallback) => {
     })
 
 }
+const mkdirs = function(dirpath) {
+  if (!fs.existsSync(path.dirname(dirpath))) {
+    mkdirs(path.dirname(dirpath));
+  }
+  fs.mkdirSync(dirpath);
+}
 
 module.exports = {
     base64ToImg,
     renderFile,
     saveFile,
-    getFileExt
+    getFileExt,
+    mkdirs
 }

webapp/src/components/ImgPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <PicPicker class="ele"
-               @uploaded="uploadImage"></PicPicker>
+               @uploaded="uploadImage" :themeId="themeId"></PicPicker>
     <div class="ele"
          :style="{ backgroundImage: 'url(' + http + element.filePath + ')' }"
          @click="selectedImg(element)"
@@ -16,6 +16,9 @@ export default {
   props: {
     selectedImg: {
       type: Function
+    },
+    themeId: {
+      type: String
     }
   },
   data () {
@@ -30,7 +33,6 @@ export default {
   },
   methods: {
     uploadImage (data) {
-      console.log(data, data)
       this.$store.dispatch('savePic', {
         'filePath': data['filePath'],
         'themeId': this.themeId,

webapp/src/components/PicturePicker.vue

@@ -21,12 +21,18 @@
   import * as http from '../util/http'
   import appConst from '../util/appConst'
   export default {
+    props: {
+      themeId: {
+        type: String
+      }
+    },
     methods: {
       fileChange (event) {
         let file = event.target.files[0]
         if (file) {
           const formData = new window.FormData()
           formData.append('image', file)
+          formData.append('themeId', this.themeId)
           http.post('/api/upload', formData).then(res => {
             let img = document.createElement('img')
             img.onload = () => {

webapp/src/views/h5editor/index.vue

@@ -43,7 +43,7 @@
           </div>
           <!-- 添加元素 2 -->
           <div class="panel panel-element clearfix" v-show="panelState === 2">
-            <ImgPanel :selectedImg="addPicElement"/>
+            <ImgPanel :selectedImg="addPicElement" :themeId="itemId"/>
           </div>
           <!-- 图层编辑面板 -->
           <EditPanel :element="element" :panelState="panelState" v-show="panelState > 10"/>