Merge pull request #3758 from dataease/pr@dev@refactor_pic-storage

refactor(仪表板): 图片组件默认存储在服务器

frontend/src/components/canvas/DeCanvas.vue

@@ -96,7 +96,7 @@ import { mapState } from 'vuex'
 import DeEditor from '@/components/canvas/components/editor/DeEditor'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import bus from '@/utils/bus'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
 import componentList, {
   BASE_MOBILE_STYLE,
@@ -115,6 +115,7 @@ import ButtonResetDialog from '@/views/panel/filter/ButtonResetDialog'
 import FilterDialog from '@/views/panel/filter/FilterDialog'
 import { userLoginInfo } from '@/api/systemInfo/userLogin'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
+import { uploadFileResult } from '@/api/staticResource/staticResource'
 
 export default {
   components: { FilterDialog, ButtonResetDialog, ButtonDialog, DeEditor },
@@ -149,6 +150,7 @@ export default {
   },
   data() {
     return {
+      maxImageSize: 15000000,
       // 需要展示属性设置的组件类型
       showAttrComponent: [
         'custom',
@@ -429,18 +431,23 @@ export default {
     goFile() {
       this.$refs.files.click()
     },
+    sizeMessage() {
+      this.$notify({
+        message: this.$t('panel.image_size_tips'),
+        position: 'top-left'
+      })
+    },
     handleFileChange(e) {
       const _this = this
       const file = e.target.files[0]
       if (!file.type.includes('image')) {
-        toast('只能插入图片')
+        toast(this.$t('panel.image_size_tips'))
         return
       }
-      const reader = new FileReader()
+      if (file.size > this.maxImageSize) {
-      reader.onload = (res) => {
+        this.sizeMessage()
-        const fileResult = res.target.result
+      }
-        const img = new Image()
+      uploadFileResult(file, (fileUrl) => {
-        img.onload = () => {
         const component = {
           ...commonAttr,
           id: generateID(),
@@ -450,7 +457,7 @@ export default {
           icon: '',
           hyperlinks: HYPERLINKS,
           mobileStyle: BASE_MOBILE_STYLE,
-            propValue: fileResult,
+          propValue: imgUrlTrans(fileUrl),
           commonBackground: deepCopy(COMMON_BACKGROUND),
           style: {
             ...PIC_STYLE
@@ -467,12 +474,7 @@ export default {
           component: component
         })
         this.$store.commit('recordSnapshot', 'handleFileChange')
-        }
+      })
-
-        img.src = fileResult
-      }
-
-      reader.readAsDataURL(file)
     },
     clearCurrentInfo() {
       this.currentWidget = null

frontend/src/components/canvas/components/editor/EditBar.vue

@@ -191,6 +191,7 @@ import FieldsList from '@/components/canvas/components/editor/FieldsList'
 import LinkJumpSet from '@/views/panel/linkJumpSet'
 import Background from '@/views/background/index'
 import MapLayerController from '@/views/chart/components/map/MapLayerController'
+import { uploadFileResult } from '@/api/staticResource/staticResource'
 
 export default {
   components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController },
@@ -240,6 +241,7 @@ export default {
   },
   data() {
     return {
+      maxImageSize: 15000000,
       boardSetVisible: false,
       linkJumpSetVisible: false,
       linkJumpSetViewId: null,
@@ -493,20 +495,25 @@ export default {
       // ignore
       e.preventDefault()
     },
+    sizeMessage() {
+      this.$notify({
+        message: this.$t('panel.image_size_tips'),
+        position: 'top-left'
+      })
+    },
     handleFileChange(e) {
       const file = e.target.files[0]
       if (!file.type.includes('image')) {
-        toast('只能插入图片')
+        toast(this.$t('panel.image_size_tips'))
         return
       }
-      const reader = new FileReader()
+      if (file.size > this.maxImageSize) {
-      reader.onload = (res) => {
+        this.sizeMessage()
-        const fileResult = res.target.result
-        this.curComponent.propValue = fileResult
-        this.$store.commit('recordSnapshot', 'handleFileChange')
       }
-
+      uploadFileResult(file, (fileUrl) => {
-      reader.readAsDataURL(file)
+        this.curComponent.propValue = fileUrl
+        this.$store.commit('recordSnapshot', 'handleFileChange')
+      })
     },
     boardSet() {
       this.boardSetVisible = true

frontend/src/lang/en.js

@@ -1865,6 +1865,8 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    image_size_tips: 'Please do not exceed 15M in the picture',
+    image_add_tips: 'Only pictures can be inserted',
     watermark: 'Watermark',
     panel_get_data_error: 'Failed to obtain panel information. The panel may have been deleted. Please check the panel status',
     panel_no_save_tips: 'There are unsaved panel',

frontend/src/lang/tw.js

@@ -1865,6 +1865,8 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    image_size_tips: '圖片請不要大於15M',
+    image_add_tips: '只能插入圖片',
     watermark: '水印',
     panel_get_data_error: '獲取儀表板信息失敗，儀表板可能已經被刪除，請檢查儀表板狀態',
     panel_no_save_tips: '存在未保存的儀表板',

frontend/src/lang/zh.js

@@ -1865,6 +1865,8 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    image_size_tips: '图片请不要大于15M',
+    image_add_tips: '只能插入图片',
     watermark: '水印',
     panel_get_data_error: '获取仪表板信息失败，仪表板可能已经被删除，请检查仪表板状态',
     panel_no_save_tips: '存在未保存的仪表板',

frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue

@@ -87,10 +87,9 @@
 <script>
 
 import { mapState } from 'vuex'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import { uploadFileResult } from '@/api/staticResource/staticResource'
-import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'BackgroundSelector',
@@ -163,13 +162,13 @@ export default {
       uploadFileResult(file, (fileUrl) => {
         _this.$store.commit('canvasChange')
         _this.panel.imageUrl = fileUrl
-        _this.fileList = [{ url: this.panel.imageUrl }]
+        _this.fileList = [{ url: imgUrlTrans(this.panel.imageUrl) }]
         _this.commitStyle()
       })
     },
     sizeMessage() {
       this.$notify({
-        message: '背景图片请不要大于15M',
+        message: this.$t('panel.image_size_tips'),
         position: 'top-left'
       })
     }