update: 修改限制文件上传类型

src/components/app-file-upload/app-file-upload.vue

@@ -8,11 +8,8 @@
           <el-upload
             :disabled="disabled"
             :file-list="files"
-          :action="uploadUrl"
-          :limit="multiple ? limit: 1"
-          :accept="accept"
-          :multiple="multiple"
-          :headers="{}"
+            :action="getAction()"
+            :headers="myHeaders"
             :before-upload="beforeUpload"
             :before-remove="onRemove"
             :on-success="onSuccess"
@@ -20,9 +17,8 @@
             :on-preview="onDownload"
             :drag="isdrag"
             :show-file-list="!rowPreview"
-          :on-exceed = "handleExceed"
             >
-            <el-button v-if="!isdrag" size='small' icon='el-icon-upload' :disabled="disabled || !(multiple || files.length === 0)">{{this.$t('app.fileUpload.caption')}}</el-button>
+              <el-button v-if="!isdrag" size='small' icon='el-icon-upload' :disabled="disabled">{{this.$t('app.fileUpload.caption')}}</el-button>
             <i v-if="isdrag" class="el-icon-upload"></i>
             <div v-if="isdrag" class="el-upload__text" v-html="$t('components.appFileUpload.uploadText')"></div>
           </el-upload>
@@ -51,17 +47,19 @@
         </ul>
       </modal>
     </div>
-</template>
+  </template>
   
-<script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
-import { Environment } from '@/environments/environment';
-import { CreateElement } from 'vue';
-import { Subject, Unsubscribable } from 'rxjs';
+  <script lang="ts">
+  import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+  import { Environment } from '@/environments/environment';
+  import { CreateElement } from 'vue';
+  import { Subject, Unsubscribable } from 'rxjs';
+  import Axios from 'axios';
+  import { Message } from 'element-ui';
   
-@Component({
-})
-export default class AppFileUpload extends Vue {
+  @Component({
+  })
+  export default class AppFileUpload extends Vue {
   
       /**
        * 表单状态
@@ -177,44 +175,6 @@ export default class AppFileUpload extends Vue {
        */
       @Prop() public exportparams?: any;
   
-    /**
-     * 是否支持多个文件上传
-     *
-     * @type {string}
-     * @memberof AppFileUpload
-     */
-    @Prop({default: true}) public multiple!: boolean;
-
-    /**
-     * 最大允许上传个数
-     *
-     * @type {*}
-     * @memberof AppImageUpload
-     */
-    @Prop({default: 9999}) public limit!: number;
-
-    /**
-     * 接受上传的文件类型
-     *
-     * @type {*}
-     * @memberof AppImageUpload
-     */
-    @Prop({default: '*'}) public accept!: string;
-
-    /**
-     * 上传文件路径
-     *
-     * @memberof AppFileUpload
-     */
-    public uploadUrl = Environment.BaseUrl + Environment.UploadFile;
-
-    /**
-     * 下载文件路径
-     *
-     * @memberof AppFileUpload
-     */
-    public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
-
       /**
        * 文件列表
        *
@@ -262,6 +222,30 @@ export default class AppFileUpload extends Vue {
        */ 
       limitType:Array<String> = ['application/x-msdownload','text/x-sh','text/html','text/javascript']
   
+      /**
+       * 当前登陆人的token
+       *
+       * @type {string}
+       * @memberof DiskFileUpload
+       */
+      public token: string = "Bearer " + localStorage.getItem('token');
+  
+      /**
+       * 上传文件请求头
+       *
+       * @type {*}
+       * @memberof DiskFileUpload
+       */
+      public myHeaders: any = {Authorization: this.token};
+  
+      /**
+       * 拼接上传路径
+       *
+       * @memberof DiskFileUpload
+       */
+       public getAction() {
+          return `${(window as any).Environment.UploadFile}`+ '?ownertype=' + this.name + '&ownerid=' + JSON.parse(this.data).srfkey;
+      }
       /**
        * 设置files
        *
@@ -269,6 +253,10 @@ export default class AppFileUpload extends Vue {
        * @memberof AppFileUpload
        */
       private setFiles(value:any): void {
+          if(value==null){
+               this.files = [];
+               return;
+          }
           let _files = JSON.parse(value);
           if (value && Object.prototype.toString.call(_files)=='[object Array]') {
               this.files = _files;
@@ -284,8 +272,7 @@ export default class AppFileUpload extends Vue {
        * @memberof AppFileUpload
        */
       private dataProcess(): void {
-
-        let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
+          let _url = `${(window as any).Environment.UploadFile}`;
           if (this.upload_params.length > 0 ) {
               _url +='?';
               this.upload_params.forEach((item:any,i:any)=>{
@@ -295,11 +282,8 @@ export default class AppFileUpload extends Vue {
                   }
               })    
           }
-        
-        this.uploadUrl = _url;
-        
           this.files.forEach((file: any) => {
-            let url = `${this.downloadUrl}/${file.id}`;
+              let url = `${(window as any).Environment.ExportFile}/${file.id}`;
               if (this.export_params.length > 0) {
                   url +='?';
               this.export_params.forEach((item:any,i:any)=>{
@@ -402,9 +386,11 @@ export default class AppFileUpload extends Vue {
        * @memberof AppFileUpload
        */
       public beforeUpload(file: any) {
-        if(this.limitType.includes(file.type)){
-                Message.error('不可上传 html、js、 exe、sh类型的文件！')
-                return false
+          const blackList = Environment.blackList;
+          const fileName = file.name?.trim().toLowerCase();
+          if (typeof fileName === 'string' && blackList.some(item => fileName.endsWith(`.${item}`))) {
+              Message.error(`不可上传 ${blackList.join('、')}类型的文件！`);
+              return false;
           }
           if(this.imageOnly){
               const imageTypes = ["image/jpeg" , "image/gif" , "image/png" , "image/bmp"];
@@ -448,7 +434,8 @@ export default class AppFileUpload extends Vue {
        * @memberof AppFileUpload
        */
       public onError(error: any, file: any, fileList: any) {
-        this.$Notice.error({ title: (this.$t('components.appFileUpload.uploadError') as any) });
+          const data = JSON.parse(error.message)
+          this.$Notice.error({ title: data.message ||  (this.$t('components.appFileUpload.uploadError') as any)});
       }
   
       /**
@@ -479,7 +466,52 @@ export default class AppFileUpload extends Vue {
        * @memberof AppFileUpload
        */
       public onDownload(file: any) {
-        window.open(file.url);
+          // 拼接url
+          let _this: any = this;
+          const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
+          const name = typeof file.name == "string" ? file.name : JSON.stringify(file.filename);
+          const downloadUrl = `${(window as any).Environment.ExportFile}`+ '/' + id + '/' + name;
+              // 发送get请求
+              Axios.get(downloadUrl, {
+                  responseType: 'arraybuffer',
+              }).then((response: any) => {
+                  if (!response || response.status != 200) {
+                      Message.error(_this.$t('components.diskFileUpload.downloadFile') + '!');
+                      return;
+                  }
+                  // 请求成功，后台返回的是一个文件流
+                  if (response.data) {
+                      // 获取文件名
+                      const disposition = response.headers['content-disposition'];
+                      const filename = disposition.split('filename=')[1];
+                      const actualFileName = file.name || filename;
+                      // 用blob对象获取文件流
+                      let blob = new Blob([response.data], {type: response.headers['content-type']});
+                      // 兼容ie语法
+                      if('msSaveOrOpenBlob' in navigator){
+                          window.navigator.msSaveOrOpenBlob(blob, actualFileName);
+                          return;
+                      }
+                      // 通过文件流创建下载链接
+                      var href = URL.createObjectURL(blob);
+                      // 创建一个a元素并设置相关属性
+                      let a = document.createElement('a');
+                      a.href = href;
+                      a.download = actualFileName;
+                      // 添加a元素到当前网页
+                      document.body.appendChild(a);
+                      // 触发a元素的点击事件，实现下载
+                      a.click();
+                      // 从当前网页移除a元素
+                      document.body.removeChild(a);
+                      // 释放blob对象
+                      URL.revokeObjectURL(href);
+                  } else {
+                      Message.error(_this.$t('components.diskFileUpload.downloadFile1'));
+                  }
+              }).catch((error: any) => {
+                  Message.error(_this.$t('components.diskFileUpload.downloadFile') + ':' + error);
+              });
       }
   
       /**
@@ -513,18 +545,10 @@ export default class AppFileUpload extends Vue {
        */
       public showActions: boolean = false;
   
-    /**
-     * 处理多选超出
-     *
-     * @memberof AppFileUpload
-     */
-    public handleExceed(files: any, fileList: any) {
-      this.$message.warning(`${this.$t('components.appFileUpload.limitselect')} ${this.limit}`);
-    }
   
-}
-</script>
+  }
+  </script>
   
-<style lang='less'>
-@import './app-file-upload.less';
-</style>
+  <style lang='less'>
+  @import './app-file-upload.less';
+  </style>
\ No newline at end of file

src/environment/environment.ts

+export const Environment = {
+    // 原型示例数模式
+    SampleMode: false,
+    // 应用名称
+    AppName: 'rpm',
+    // 应用 title
+    AppTitle: '制度流程管理系统',
+    // 应用基础路径
+    BaseUrl: '',
+    // 系统名称
+    SysName: 'rpm',
+    // 远程登录地址，本地开发调试使用
+    RemoteLogin: '/ibizutil/login',
+    // 文件导出
+    ExportFile: '/ibizutil/download',
+    // 文件上传
+    UploadFile: '/ibizutil/upload',
+    // 数据导入单次上传最大数量
+    sliceUploadCnt: 100,
+    // 是否为pc端应用
+    isAppMode:true,
+    //统一地址
+    uniteAddress:"http://172.16.100.202:8114",
+    // 是否为开发模式
+    devMode: true,
+    // 是否开启权限认证
+    enablePermissionValid:false,
+    // 菜单权限模式，可选值：RT(RT模式),RESOURCE(资源模式),MINIX(混合模式),默认MINIX
+    menuPermissionMode:"MINIX",
+    // 项目模板地址
+    ProjectUrl: "http://demo.ibizlab.cn/ibizr7pfstdtempl/ibizvuer7",
+    // 打开目标工具，可选参数：sln、mos
+    debugOpenMode:'mos',
+    // 配置平台地址
+    StudioUrl: "http://172.16.170.145/mos/",
+    // 中心标识
+    SlnId: "B4BF5C84-D020-4D9A-A986-8FA4FD72816C",
+    // 系统标识
+    SysId: "B428B5BE-EA90-4101-A493-BA7085D89F0A",
+    // 前端应用标识
+    AppId: "6e0b7357169ef4eba84e1347ed94bd84",
+    // 项目发布文件地址
+    PublishProjectUrl: 'http://ibiz.ibizee.cn/t7d01aab0f300e1f75fad0314e98cecab/RPM.git',
+    // ibiz开放平台地址
+    ibizlabtUrl: 'https://www.ibizlab.cn',
+    // ibiz论坛地址
+    ibizbbstUrl: 'https://bbs.ibizlab.cn',
+    // 是否启用工作流
+    workflow: false,
+    previewFileUrl:'http://172.16.103.143:8013',
+    blackList: ['html', 'js', 'exe', 'sh', 'bat', 'css', 'htm', 'aspx', 'jsp', 'asp', 'php']
+};
+// 挂载外部配置文件
+if ((window as any).Environment) {
+    Object.assign(Environment, (window as any).Environment);
+}
\ No newline at end of file