element--upload上传配合 java后台

野性酷女 2021-08-13 13:01 464阅读 0赞

后台使用java，代码如下：

@ResponseBody
        @RequestMapping(params = "method=uploadFile")
        public String uploadFile( @RequestParam("file") List<MultipartFile> file, HttpServletRequest request ) {
            //把文件放在部署路径下的用户ID文件夹中
            String webPath = request.getSession().getServletContext().getRealPath("/");
            Map uploadPath = request.getParameterMap();
            String userId = ((String[]) uploadPath.get("userId"))[0];
            String filePath = "uploaddir/" + userId + "/";
    
            File dir = new File(webPath+filePath);
            if (!dir.exists()) {
                dir.mkdirs();
            }
    
            List<Map<String,Object>> resultList = new ArrayList<>();
            Map<String, Object> result = null;
            Map<String, Object> resultmap = new HashMap<>();
            try {
                for(MultipartFile myfile : file){
    
                    String filename = getFilename(myfile.getOriginalFilename());
                    String newFileName = System.currentTimeMillis() + filename.substring(filename.lastIndexOf("."));
                    String uuid= AppUtil.getUUID();
                    //上传文件
                    File tfile = new File(webPath+filePath, newFileName);
                    myfile.transferTo(tfile);
                    //将文件名和文件路径返回
                    result = new HashMap<String, Object>();
                    result.put("ID", uuid);// 文件添加一个ID
                    result.put("filename", filename);//原文件名
                    result.put("newFileName", newFileName);//新文件名
                    result.put("filepath", filePath + newFileName);//文件路径
                    result.put("fullfilepath", webPath+filePath + newFileName);//文件全路径
    
                    resultList.add(result);
                }
                resultmap.put("success", "1");
                resultmap.put("list", resultList);
    
            } catch (IOException e) {
                resultmap.put("success", "0");
                logger.error(e.getMessage());
            }
            String str = JSON.toJSONString(resultmap, SerializerFeature.DisableCircularReferenceDetect);
            logger.debug("结果：{}", str);// debug 输出结果
            return str;
        }
    
    
    /**
         * 处理文件名中的特殊字符
         * @param oriFilename
         * @return
         */
        private String getFilename(String oriFilename){
            //将特殊字符[]英文括号，处理成中文【】
            String filename = oriFilename.replaceAll("\\[","【").replaceAll("\\]","】");
            //将文件名中的空格去掉
            filename = filename.replaceAll(" ","");
    
            return filename;
    
        }

删除已上传的文件

public Map<String, Object> deleteFile(ParameterVO parameterVO) {
      HashMap<String, Object> result = new HashMap<>();
        result.put("success", "1");
        Map<String, Object> paramMap = parameterVO.getDimensions();
        String filePath = paramMap.get("UP_FILE").toString();  //拿到文件的路径
        try{
            File fileTemp = new File(filePath);
            if(fileTemp.exists()){
                fileTemp.delete();
            }
        }catch (Exception e){
            result.put("success", "0");
            logger.debug(e.getMessage());
        }
        return result;
    }

前端代码：

<el-form-item label="文件上传" prop="">
        <el-upload
                 class="upload-demo"
                 ref="upload"
                 :action="fileUpload.url"
                 :data = 'fileUpload.data'
                 :auto-upload="false"
                 :on-success="file_success"
                 :on-error="file_erorr"
                 :on-remove = 'deleteFile'
                 :limit="1"
                 :on-exceed="handleExceed"
                 :file-list="fileList"
         >
             <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
         </el-upload>
     </el-form-item>

js代码：

submit(){ //手动触发上传
    	this.$refs.upload.submit(); // 上传文件
    },
    handleExceed(){
    	this.$message.warning('仅允许上传一个文件！')
    },
    file_success: function(file){
        this.fileMsg.FILE_NAME = file.list[0].newFileName; // 文件名
        this.fileMsg.OLD_FILE_NAME = file.list[0].filename; // 文件名
        this.fileMsg.UP_FILE = file.list[0].fullfilepath; // 文件路径
        this.fileMsg.ID = file.list[0].ID; // 文件ID
    },
    file_erorr: function(){
        this.$message.error('上传失败！');
    },
    deleteFile: function(file, fileList){
        if(file && file.status==="success"){
        /******              *******/
           if (data.success == '1'){
               that.$message({
                   message: '删除成功!',
                   type: 'success'
               });
           }else {
               that.$message.error('删除失败！');
           }
        }
    },