java 实现上传功能

忘是亡心i 2021-09-30 05:34 379阅读 0赞

上传功能 使用的是**Element UI**  提供的  ***Upload插件***

前端：

<template>
      <div>
        
        <el-card style="height:400px;overflow-y:auto;">
            <div style="width:250px;"> 
                <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    :before-upload='checkFileType'
                    :limit="1"
                    :data="uploadParamData"  
                    :on-remove="handleRemove"
                    ref="test"
                    :auto-upload="false"
                    :on-success="afterSuccess"
                >
                    <el-button size="small" type="primary">选择文件</el-button>
                </el-upload>
                <div slot="tip" class="el-upload__tip" style="margin-top:10px">只能上传<b class="fonta_"> .xlsx </b> 和<b class="fonta_"> .xls </b>文件</div>
                <el-button size="small" type="primary" plain @click="submint" style="margin-top:30px">确认上传</el-button>
            </div>
        </el-card>
      </div>
    </template>

<script>
    export default {
      data() {
        return {
            userInfo: this.$store.state.userBean, //{"userId":"","username":"","deptId":"","dept":""}
    
            /******************************** 上传文件相关 ********************************/
            uploadUrl:'',       //上传路径
            uploadParamData:{   //上传参数
                userId:this.$store.state.userBean.userId,
                userName:this.$store.state.userBean.username,
                UploadFile:'',
            },
        };
      }, 
      methods: {
        submint(){
            this.$refs.test.submit();// Element UI 提供的提交 方法
        },
        //上传成功后执行
        afterSuccess(response, file, fileList){
            console.log('上传结果返回的值=',response)
             this.$message.warning(response.returnData);
             this.$refs.test.clearFiles();//清空上传列表
    
        },
        handleRemove(file) {
            return true;    //直接删除
        },
        //检查文件类型
        checkFileType(file){
            let fileType = file.name.substr(file.name.lastIndexOf('.'),file.name.length-1)
            if(fileType!='.xlsx' && fileType!='.xls'){
                this.$message.warning(`${file.name}  不符合上传文件类型`);
                return false;
            }
            this.uploadParamData.UploadFile = file.name;
        },
    },
      created(){
        this.uploadUrl = `${fss}/dcb/upload`;
      }
    };
    </script>

后端：

/**
         * 导入 --->资产信息
         * @param request
         * @return
         * @throws IOException
         * @throws DbException
         */
        @RequestMapping(value = "/upload",method = RequestMethod.POST)
        @ResponseBody
        public AjaxJsonResult uploadFile(HttpServletRequest request,@RequestParam("file") MultipartFile file){
            AjaxJsonResult ajr = new AjaxJsonResult();
            ajr.setOperSuc("上传失败");
            try {
                String fileName = file.getOriginalFilename();   /*获取文件名*/
                String suffixName = fileName.substring(fileName.lastIndexOf(".")); /*获取文件的后缀名*/
                System.out.println("获取文件名 ="+fileName);
                System.out.println("获取文件的后缀名 ="+suffixName);
                String filePath = "C:\\Users\\fan\\Desktop\\图片\\";             /*保存 文件路径*/
                File newFile = new File(filePath + fileName);
    
                if (!newFile.getParentFile().exists()) {   /*检测是否存在目录*/
                    newFile.getParentFile().mkdirs();
                }
                file.transferTo(newFile);
                ajr.setOperSuc("上传成功");
            } catch (IllegalStateException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }finally {
                return ajr;
            }
        }

## 注： ##

**        @RequestParam("file") MultipartFile file  注解中接收的参数名为 file 和前端传到的值的名字无关 **(虽然目前也不知道为啥)

发表评论取消回复

表情：

评论列表（有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue图片上传功能实现

//html部分 <template> <div class="form-group"> <label class="c...

蔚落/ 2024年04月18日 22:14/ 0 赞/ 71 阅读

相关 SpringBoot实现上传下载功能

注：demo保存在码云项目中 1、设置maven依赖这里我们集成knife4j方便测试 <dependency> <gr

骑猪看日落/ 2024年03月30日 12:42/ 0 赞/ 71 阅读

相关 vue实现文件上传功能

代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

本是古典何须时尚/ 2023年07月12日 14:45/ 0 赞/ 162 阅读

相关 uniapp实现头像上传功能

uniapp实现头像上传功能步骤：大概分为以下3步 1.点击触发事件 2.选择图片 3.通过接口上传 1.事件触发 <view cl

╰半夏微凉°/ 2022年10月16日 07:13/ 0 赞/ 600 阅读

相关文件上传功能的实现

前提：拷入两个包：![Center][] 一、Jsp页面设置：制作表单： <form action="$\{pageContext.request.contex

绝地灬酷狼/ 2022年10月01日 00:54/ 0 赞/ 224 阅读

相关 java实现文件上传ftp服务器功能

java文件上传至ftp服务器废话不多说，直接上代码，这里提供两种方法，此程序运行需要下载apache-commons-net.jar包

忘是亡心i/ 2022年09月27日 15:27/ 0 赞/ 318 阅读

相关 PHP实现文件上传功能

注意：服务器中php.ini文件特征属性我们需要手动在服务器端的 php.ini 中设置对表单传递的数据进一步判断 file\_uploads = On /Off 是否允

亦凉/ 2022年09月23日 11:55/ 0 赞/ 271 阅读

相关 springMVC实现文件上传功能

package com.sxt.web; import java.io.File; import java.util.Date; import javax.s

系统管理员/ 2022年04月12日 09:59/ 0 赞/ 360 阅读

相关 springboot实现文件上传功能

最近在做文件上传功能，查找了很多资料，下面记录一下，以下是springboot代码片段java代码 MultipartFile是spring类

落日映苍穹つ/ 2022年01月29日 08:45/ 0 赞/ 450 阅读

相关 java 实现上传功能

上传功能使用的是Element UI 提供的 Upload插件前端： <template> <div> <!-- 上传文件 --

忘是亡心i/ 2021年09月30日 05:34/ 0 赞/ 380 阅读