文件上傳

1.需求

1.1 文件需要在fastDfs，和本地各存一份 ，并且返回本地路徑點(diǎn)擊保存時(shí)將路徑存入數(shù)據(jù)庫

1.2 文件下載時(shí)先從本地拉取，如果本地文件不存在，從fastDfs拉取

2.效果展示

3.前段代碼

3.1.0 合同簽訂框-基本信息

<el-row><el-form-item label="附件上傳:" prop="remark" size="mini" ><el-uploadclass="upload-demo"ref="uploadFileId" //保存返回的路徑時(shí)使用:action="uploadFileUrl" //必選參數(shù)，上傳的地址:on-preview="handlePreview" //點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子:on-success="handleSuccess" //文件上傳成功時(shí)的鉤子:on-remove="handleRemove" //文件列表移除文件時(shí)的鉤子:before-upload="beforeUpload" //上傳文件之前的鉤子:multiple =false //是否支持多選文件:limit="1"accept=".pdf":file-list="fileList" //上傳的文件列表:auto-upload="autoUpload"> //是否在選取文件后立即進(jìn)行上傳<el-button size="small" type="primary">點(diǎn)擊上傳</el-button><span>上傳pdf文件,不超過20M</span></el-upload></el-form-item> </el-row>

3.1.1 合同簽訂框-合同簽訂

<el-table-column prop="filePath" label="附件" align="center"show-overflow-tooltip><template slot-scope="scope"><span v-if=" scope.row.filePath != null && scope.row.filePath != '' " style="color:#FF5722;"><el-link size="mini" @click="previewFile(scope.row.filePath)">預(yù)覽<i class="el-icon-view el-icon--right"></i> {{scope.row.filePath.split("/")[2]}}</el-link></span></template> </el-table-column>

3.2 JS中需要定義的參數(shù)

uploadFileUrl: contextPath + '/api/apitudeFile/uploadSingleFile', fileList: [], autoUpload:false,

3.3 methods方法

//附件上傳成功后的方法 handleSuccess:function(response, file, fileList){vm.ruleForm.filePath = response.toString(); },//移除附件列表 handleRemove:function(file, fileList){if(isNotNULL(vm.ruleForm.id)){vm.ruleForm.filePath=null;let param ={id:vm.ruleForm.id};this.$resource(contextPath + '/api/hrpEmployeeContract/deleteFilePath').query(param).then(function (response) {this.search();this.$message.warning("文件移除成功");}).catch(function (error) {this.showMsgError(error.data.errMsg);});} },//點(diǎn)擊附件的方法 handlePreview:function(file){this.previewFile(file.url); },//預(yù)覽文件 previewFile(filePath){window.top.vueObject.openHelp(contextPath + '/api/hrpEmployeeContract/downloadFile?filePath=' + filePath,'勞動(dòng)合同預(yù)覽'); },//文件上傳前的校驗(yàn) beforeUpload:function(file){let name = file.name;let size = file.size / 1024 / 1024;debuggerif(!(name.indexOf("pdf")>0) && !(name.indexOf("PDF")>0)){this.$message.warning("請選擇pdf文件");return false;}if(size > 20 ){this.$message.warning("文件大小不要過20M");return false;} },

4 后臺(tái)代碼

4.1 文件上傳后臺(tái)

4.1.0 Controller

@RequestMapping("/uploadSingleFile") public ResponseEntity<Object> uploadSingleFile(@RequestParam("file") MultipartFile multipartFile,HttpServletRequest request ){String path = request.getSession().getServletContext().getRealPath("/upload");String filePath = mmsApitudeFileApi.uploadSingleFile(multipartFile,path);return new ResponseEntity<Object>(filePath,HttpStatus.OK); }

4.1.1 ServiceImp

@Override public String uploadSingleFile(MultipartFile file, String realPath) {try {//保存時(shí)的文件名String originalFileName = file.getOriginalFilename();String type = StringUtils.substringAfterLast(originalFileName,".");String dateName = System.currentTimeMillis() +"_"+ originalFileName;//保存文件的絕對路徑File dir = new File(realPath);if (!dir.exists()) {dir.mkdirs();}String pathToDb = "/upload/" + dateName;MmsApitudeFile mmsApitudeFile = new MmsApitudeFile();mmsApitudeFile.generateId();mmsApitudeFile.setFileStatus("1");//fileType字段存儲(chǔ)業(yè)務(wù)主鍵mmsApitudeFile.setFileType("");mmsApitudeFile.setFileText(file.getBytes());mmsApitudeFile.setFileSize(new BigDecimal(file.getSize()));mmsApitudeFile.setFileForm(type);mmsApitudeFile.setFileName(dateName);mmsApitudeFile.setFileUploadTime(new Date());mmsApitudeFile.setFileUrl(pathToDb);String filePath = realPath + File.separator + dateName;File tempFile = new File(filePath);file.transferTo(tempFile);mmsApitudeFileDao.insert(mmsApitudeFile);return pathToDb;}catch (Exception e ){throw new RuntimeException(e);} }

4.2 文件預(yù)覽,下載

@RequestMapping(value = "/downloadFile", method = RequestMethod.GET,produces="application/pdf") public ResponseEntity<Object> downloadFile(String filePath, HttpServletRequest request, HttpServletResponse response) {Assert.notBlank("filePath", "文件路徑不可為空");String path = request.getSession().getServletContext().getRealPath("");File file = new File(path + filePath);if (!file.exists()) {MmsApitudeFile mmsApitudeFile = new MmsApitudeFile();mmsApitudeFile.setFileUrl(filePath);List<MmsApitudeFile> pictureList = mmsApitudeFileApi.findList(mmsApitudeFile);mmsApitudeFileService.downloadFileIfNotExists(pictureList, path);}try {String name = StringUtils.substringAfterLast(filePath, "/");HttpHeaders headers = new HttpHeaders();response.addHeader("Content-Disposition", "inline;filename="+new String(name.getBytes(StandardCharsets.UTF_8),"iso8859-1"));return new ResponseEntity<Object>(FileUtil.readBytes(new File(path + filePath)), headers, HttpStatus.OK);} catch (Exception e) {throw new RuntimeException(e);}}

總結(jié)

以上是生活随笔為你收集整理的文件上传（人事信息管理-劳动合同）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。