element--upload上传 配合 java后台

后台使用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('删除失败!');
       }
    }
},
### 实现文件上传与下载功能 #### 文件上传部分 在 Vue3 或 Vue2 中使用 `el-upload` 组件实现文件上传功能时,可以通过配置不同的属性来满足需求。以下是基于 Element Plus 的实现方式: 1. **HTML 结构** 使用 `<el-upload>` 标签定义上传组件,并绑定必要的事件和参数。 ```html <template> <div> <!-- 文件上传 --> <el-upload class="upload-demo" action="/api/upload" <!-- 替换为实际的后端接口地址 --> :headers="headers" :before-upload="beforeUpload" :on-success="handleSuccess" :file-list="fileList"> <el-button type="primary">点击上传</el-button> </el-upload> <!-- 文件下载按钮 --> <el-button @click="downloadFile">点击下载</el-button> </div> </template> ``` 2. **JavaScript 部分** 定义数据模型和方法以处理上传逻辑。 ```javascript <script> export default { data() { return { headers: { Authorization: 'Bearer your-token' }, // 如果需要携带 token,则在此处设置 fileList: [] // 已上传文件列表 }; }, methods: { beforeUpload(file) { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('上传文件大小不能超过 2MB!'); } return isLt2M; // 返回 false 则会阻止上传过程[^1] }, handleSuccess(response, file, fileList) { console.log('上传成功:', response); this.fileList.push({ name: file.name, url: response.data.url }); // 假设后端返回文件 URL }, downloadFile() { window.location.href = '/api/download'; // 替换为实际的后端下载接口地址[^3] } } }; </script> ``` 上述代码中: - `action`: 指定后端接收文件上传请求的 API 地址。 - `headers`: 可选字段,用于传递额外的信息到服务器(如认证令牌)。 - `before-upload`: 自定义校验逻辑,在上传前验证文件合法性。 - `on-success`: 处理上传成功的回调函数,通常用来更新前端状态或显示提示信息。 - `file-list`: 显示已上传文件的列表。 --- #### 文件下载部分 对于文件下载功能,一般通过后端提供一个专门的接口供客户端访问。当用户点击“下载”按钮时,浏览器会跳转至该接口地址并触发文件流传输操作。 假设 Java 后端已经实现了 `/api/download` 接口,那么只需简单地将页面重定向至此链接即可完成下载动作。 如果需要动态指定要下载的具体文件名或其他参数,可以在 URL 中附加查询字符串或者采用 POST 请求形式提交表单数据给后台处理。 --- ### 注意事项 为了提升用户体验,建议加入进度条展示、错误提示等功能模块;同时也要注意安全性方面的问题,比如防止恶意脚本注入攻击等风险[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值