1.了解文件管理页面 ①文件服务器管理页面：管理各个系统所对应的文件服务器 ②文件管理：文件记录管理 ③文件服务器文件夹描述：描述各个文件夹的具体作用 2.文件上传 前端组件 ①thumb-manager：只传一张图片，上传本地磁盘信息不入库  ``` { type:"custom", component:thumbManager, field:"introThumb", title:"缩略图", span:24, mode:this.mode, uploadPara: { bizType:"GIS_PORTAL_APP"     }, } ``` ②gis-photo-upload：可以传多张图片，上传本地磁盘并信息入库  ```  { type:"photo", field:"appPic", title:"应用截图", mode:this.mode, config: { showUrl:"/gis/back/file/getFullPath"  }, uploadPara: { bizId:this.param == undefined ? "" : this.param, bizType:"GIS_PORTAL_APP", isLocal:true      }, fetchPara: { bizId:this.param === undefined ? "" : this.param, } }, ``` ③gis-form-upload：上传文件服务器并信息入库  ```  { type:"upload", title:"上传附件", field:"file", mode:this.mode,//当前页面类型，新增/编辑/详情 uploadPara: { bizId:this.param === undefined ? "" : this.param, bizType:"GIS_PORTAL_USER_GUIDE", isLocal:false     }, fetchPara: { bizId:this.param === undefined ? "" : this.param, }  }, ``` 各参数解释： bizId：业务ID bizType:业务类型 isLocal：是否存到本地磁盘 一个文件的完整路径 = 文件服务器的url + 业务的相对地址 + 文件名 在业务数据类型管理页面中配置，根据传入的bizType去数据库获取数据  文件服务器的url：根据配置中的文件服务器code获取 业务的相对地址：配置中的文件夹路径 上传文件时，先把文件传到临时文件夹，有信息入库的先创建文件数据，等业务提交时再去回填，并把文件从临时文件夹移到正式文件夹。 3.文件下载 因为文件服务器有账号密码无法直接获取，只能通过流获取到文件信息，最后以流的形式传给前端。 使用axios请求（不支持jquery, jquery将返回的数据转换为了string，不支持blob类型）上传接口时需设置 responseType: 'blob'，接收格式为blob( Blob 对象表示一个不可变、原始数据的类文件对象)。前端接收时需创建Blob对象,下载是通过模拟点击a标签下载，预览则是设置img元素的src属性上，如果是pdf预览，则需要在embed元素上的src属性。 ``` export const downloadRequest = (url, params) => { constaccessToken = getStore('accessToken') returnaxios({ method:'get', url:`${base}${url}`, responseType:'blob', params:params, headers: { accessToken:accessToken      }    }) } <imgclass="img"ref="print-preview-img" style="width: 95%;  margin-left:20px;margin: 0 auto;"/> this.downloadRequest(`${files.fileDownload}`, { fileId:fileId }).then(res=> { if (res.type === "application/octet-stream") { //文件流返回值类型 constcontent = res; //下载（文件流数据，文件名） fileStream.downloadStream(content, fileName); //预览（元素名，文件流数据，文件类型） fileStream.showStream(this.$refs["print-preview-img"], content, "JPG");     } else { this.$Message.warning("下载失败"); }  } ``` 请求拿到文件流数据，调用fileStream工具类进行下载预览。