Vue+springmvc+mybatis前后端分离学习---(小功能)前端文件上传与后端接收保存记录

记录项目运用的小功能：文件上传与保存

---

前端的文件上传控件使用ElementUI的【手动上传】，后端使用MultipartFile进行处理，本次先不管具体细节的设置，跑通第一位。

一、前端系统代码：

1.控件：只为跑通就先修改action属性，其中的api将被替换为后端系统端口号，替换与跨域具体请看本记录的第三章。

<el-upload
                class="upload-demo"
                ref="upload"
                action="/api/CCLX_war_exploded/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false"
              >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button
                  style="margin-left: 10px;"
                  size="small"
                  type="success"
                  @click="submitUpload"
                >上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>

2.属性与方法：

data() {
    return {
      fileList: [{name: 'xxx.jpg', url: '你的图片路径'}]
    };
  },
methods: {
    submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
  },
};

二、后端系统代码：

1.controller方法（每一步请见注释）：

 // 处理文件上传
    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile multipartFile) throws IOException {

        //获取文件名
        String fileName = multipartFile.getOriginalFilename();

        //获取文件后缀
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());

        //生成随机文件名
        String localFileName = System.currentTimeMillis() + fileSuffix;

        //设置文件存储路径
        String filePath = "D://uploadtest" + File.separator + localFileName;

        //所上传的文件路径
        File localFile = new File(filePath);

        //存放图片的目录
        File imagePath = new File("D://uploadtest");
        if (!imagePath.exists()) {
            imagePath.mkdirs();
        }

        //转存
        multipartFile.transferTo(localFile);
        return localFileName;
    }

2.踩坑：到这运行会报MultipartFile相关的错误，查半天都说什么Linux系统自动删除临时文件造成的，但明明是Windox系统，最后发现原因在于spring的配置文件中少了以下配置，比如我的是applicationContext.xml，需添加：

<!-- 文件处理-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

效果展示：

1.前台选择图片并上传

2.前往后台设置的D://uploadtxt查看：

记录结束 2020-07-29

---

“没什么难的，不要忘记呼吸”

第一章传送—>Spring与Mybatis单独配置运行记录
第二章传送—>Spring与Mybatis整合思路记录
第三章传送门—>前端搭建与跨域解决