Vue+SSM使用Elenent的上传组件实现单文件上传

1.vue文件

<template>
 <!-- <h3>这是一个上传文件页面</h3> -->
 <div>
  <el-upload
   action=""
   :auto-upload="false"
   :file-list="fileList"
   :on-change="handleChange">
   <!-- action 我这里演示手动上传就不需要选择服务器地址,但是该参数必须要,不然会报错 -->
        <!-- :auto-upload='false' 改属性默认为 true 会默认直接提交文件 我这边手动提交所以选择 false-->
        <!-- :file-list="fileList" 官网上是上传的文件列表, 我这边为了单文件,实现第二次选择上传清空-->
        <!-- :on-change="handleChange" 文件状态改变时的钩子函数 -->
        <!-- 可以自己添加更多的样式 -->
   <el-button slot="trigger" type="primary" @click="delFile">选取文件</el-button>
   <el-button type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
 </div>
</template>

<script>
 export default{
  data(){
   return{
    fileList:[],
   }
  },
  methods:{
   //重新选择的时候清除原来的文件
   delFile(){
    this.fileList = [];
   },
   //文件状态改变时的钩子函数
   handleChange(file, fileList){
    this.fileList = fileList;
   },
   //单击上传到服务器（提交）按钮
   submitUpload(){
    let formData = new FormData(); //文件转换
    //fileList对应服务器接收名称
    formData.append("fileList", this.fileList[0].raw);
    console.log(formData);
    this.$axios.post('/api/upload/charge', formData, {"Content-Type": "multipart/form-data;charset=utf-8"})
    .then(res =>{
     console.log(res);
    })
    .catch(error =>{
     this.$message.error("错误错误");
    })
    
    
    
   },
  
   
   
  }
 }
</script>

<style>
</style>

2.controller：

    //上传文件
    @RequestMapping("/charge")
    @ResponseBody
    public String charge(@RequestParam("fileList")MultipartFile multipartFile, HttpServletRequest request){
        //判断所上传文件是否存在
        if(multipartFile.isEmpty()){
            return "上传错误";
        }
        //获取上传文件的原始名称
        String originalFilename = multipartFile.getOriginalFilename();
        //设置上传文件的保存地址目录
        String dirPath = request.getSession().getServletContext().getRealPath("/upload/");
        File filePath = new File(dirPath);
        //如果保存的地址不存在,就先创建目录
        if (!filePath.exists()) {
            filePath.mkdirs();
        }
        //获取当前文件的后缀
        String suffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
        //获取当前时间并格式化
        Date d = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        System.out.println(sdf.format(d) + originalFilename.substring(0,originalFilename.lastIndexOf(".")));
        String newFileName = sdf.format(d) + originalFilename.substring(0,originalFilename.lastIndexOf(".")) + "." + suffix;
        
        //使用UUID重新命名上传的文件名称(UUID(唯一识别码)+原始文件名称后缀)
//        String newFileName = UUID.randomUUID() + "." + suffix;
        try {
            //创建可能会有错误,强制添加异常
            multipartFile.transferTo(new File(dirPath + newFileName));
        } catch (IOException e) {
            e.printStackTrace();
            return "上传错误";
        }
        System.out.println(dirPath + newFileName);
        return "上传成功"+"文件地址="+dirPath + newFileName;


    }

3.在pom.xml里引入依赖

<!-- file upload part  -->
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3</version>
</dependency>
<!--    使用commons-fileupload的版本大于1.0的话则必须引入commons-io.jar-->
<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.5</version>
</dependency>

4.在spring-dao.xml里配置文件上传的bean

<!--    处理文件上传，id是固定值，不可改变  -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--        上传大小限制50M-->
        <property name="maxUploadSize">
            <value>52428800</value>
        </property>
        <property name="defaultEncoding">
            <value>utf-8</value>
        </property>
    </bean>

参考博客：https://www.icode9.com/content-4-687806.html