优化图片和文件上传

jshERP-web/src/api/api.js

@@ -144,6 +144,7 @@ const addSystemConfig = (params)=>postAction("/systemConfig/add",params);
 const editSystemConfig = (params)=>putAction("/systemConfig/update",params);
 const checkSystemConfig = (params)=>getAction("/systemConfig/checkIsNameExist",params);
 const getCurrentSystemConfig = (params)=>getAction("/systemConfig/getCurrentInfo",params);
+const fileSizeLimit = (params)=>getAction("/systemConfig/fileSizeLimit",params);
 //用户|角色|模块关系
 const addUserBusiness = (params)=>postAction("/userBusiness/add",params);
 const editUserBusiness = (params)=>putAction("/userBusiness/update",params);
@@ -262,6 +263,7 @@ export {
   editSystemConfig,
   checkSystemConfig,
   getCurrentSystemConfig,
+  fileSizeLimit,
   addUserBusiness,
   editUserBusiness,
   checkUserBusiness,

jshERP-web/src/components/jeecg/JImageUpload.vue

@@ -28,6 +28,7 @@
   import Vue from 'vue'
   import { ACCESS_TOKEN } from "@/store/mutation-types"
   import { getFileAccessHttpUrl } from '@/api/manage'
+  import { fileSizeLimit } from '@/api/api'
 
   const uidGenerator=()=>{
     return '-'+parseInt(Math.random()*10000+1,10);
@@ -50,6 +51,8 @@
         fileList: [],
         previewImage:"",
         previewVisible: false,
+        sizeLimit: 0,
+        uploadGoOn:true,
       }
     },
     props:{
@@ -89,10 +92,18 @@
       }
     },
     created(){
+      this.initFileSizeLimit()
       const token = Vue.ls.get(ACCESS_TOKEN);
       this.headers = {"X-Access-Token":token}
     },
     methods:{
+      initFileSizeLimit() {
+        fileSizeLimit().then((res)=>{
+          if(res.code === 200) {
+            this.sizeLimit = res.data
+          }
+        })
+      },
       initFileList(paths){
         if(!paths || paths.length==0){
           this.fileList = [];
@@ -118,13 +129,28 @@
         this.fileList = fileList
       },
       beforeUpload: function(file){
-        var fileType = file.type;
+        this.uploadGoOn=true
+        let fileType = file.type;
+        let fileSize = file.size;
         if(fileType.indexOf('image')<0){
           this.$message.warning('请上传图片');
+          this.uploadGoOn=false
           return false;
         }
+        //验证文件大小
+        if(fileSize>this.sizeLimit) {
+          let parseSizeLimit = (this.sizeLimit/1024/1024).toFixed(2)
+          this.$message.warning('抱歉，文件大小不能超过' + parseSizeLimit + 'M');
+          this.uploadGoOn=false
+          return false;
+        }
+        return true
       },
       handleChange(info) {
+        console.log("--文件列表改变--")
+        if(!info.file.status && this.uploadGoOn === false){
+          info.fileList.pop();
+        }
         this.picUrl = false;
         let fileList = info.fileList
         if(info.file.status==='done'){

jshERP-web/src/components/jeecg/JUpload.vue

@@ -45,6 +45,7 @@
   import Vue from 'vue'
   import { ACCESS_TOKEN } from "@/store/mutation-types"
   import { getFileAccessHttpUrl } from '@/api/manage';
+  import { fileSizeLimit } from '@/api/api'
 
   const FILE_TYPE_ALL = "all"
   const FILE_TYPE_IMG = "image"
@@ -77,8 +78,9 @@
         moveDisplay:'none',
         showMoverTask:false,
         moverHold:false,
-        currentImg:''
+        currentImg:'',
         //---------------------------- end 图片左右换位置 -------------------------------------
+        sizeLimit: 0
       }
     },
     props:{
@@ -162,6 +164,7 @@
       }
     },
     created(){
+      this.initFileSizeLimit()
       const token = Vue.ls.get(ACCESS_TOKEN);
       //---------------------------- begin 图片左右换位置 -------------------------------------
       this.headers = {"X-Access-Token":token};
@@ -170,6 +173,13 @@
     },
 
     methods:{
+      initFileSizeLimit() {
+        fileSizeLimit().then((res)=>{
+          if(res.code === 200) {
+            this.sizeLimit = res.data
+          }
+        })
+      },
       initFileListArr(val){
         if(!val || val.length==0){
           this.fileList = [];
@@ -234,7 +244,8 @@
       },
       beforeUpload(file){
         this.uploadGoOn=true
-        var fileType = file.type;
+        let fileType = file.type;
+        let fileSize = file.size;
         if(this.fileType===FILE_TYPE_IMG){
           if(fileType.indexOf('image')<0){
             this.$message.warning('请上传图片');
@@ -242,7 +253,13 @@
             return false;
           }
         }
-        //TODO 扩展功能验证文件大小
+        //验证文件大小
+        if(fileSize>this.sizeLimit) {
+          let parseSizeLimit = (this.sizeLimit/1024/1024).toFixed(2)
+          this.$message.warning('抱歉，文件大小不能超过' + parseSizeLimit + 'M');
+          this.uploadGoOn=false
+          return false;
+        }
         return true
       },
       handleChange(info) {

jshERP-web/src/views/bill/dialog/BillDetail.vue

@@ -797,8 +797,8 @@
           </template>
           <template v-if="fileList.length>0">
             <a-row class="form-row" :gutter="24">
-              <a-col :span="8">
+              <a-col :span="10">
-                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="附件">
+                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 3 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 21 }}" label="附件">
                   <ul style="list-style-type:none">
                     <li v-for="(item,index) in fileList" :key="index">
                       <a :href="item.url" target="_blank">{{item.name}}</a>
@@ -806,7 +806,7 @@
                   </ul>
                 </a-form-item>
               </a-col>
-              <a-col :span="16"></a-col>
+              <a-col :span="14"></a-col>
             </a-row>
           </template>
       </a-form>

jshERP-web/src/views/financial/dialog/FinancialDetail.vue

@@ -388,8 +388,8 @@
         </template>
         <template v-if="fileList.length>0">
           <a-row class="form-row" :gutter="24">
-            <a-col :span="8">
+            <a-col :span="12">
-              <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="附件">
+              <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 3 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 21 }}" label="附件">
                 <ul style="list-style-type:none">
                   <li v-for="(item,index) in fileList" :key="index">
                     <a :href="item.url" target="_blank">{{item.name}}</a>
@@ -397,7 +397,7 @@
                 </ul>
               </a-form-item>
             </a-col>
-            <a-col :span="16"></a-col>
+            <a-col :span="12"></a-col>
           </a-row>
         </template>
       </a-form>

jshERP-web/src/views/material/modules/MaterialModal.vue

@@ -143,7 +143,7 @@
             <a-row class="form-row" :gutter="24">
               <a-col :lg="12" :md="12" :sm="24">
                 <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="图片">
-                  <j-image-upload v-model="fileList" bizPath="material" isMultiple="true"></j-image-upload>
+                  <j-image-upload v-model="fileList" bizPath="material" isMultiple></j-image-upload>
                 </a-form-item>
               </a-col>
               <a-col :lg="12" :md="12" :sm="24"></a-col>