使用MultipartFile+ElementUi(el-upload)实现前端向后端传图片

小小徐404

已于 2022-04-15 21:17:57 修改

阅读量8k

点赞数 1

分类专栏：学习记录文章标签： java spring 前端框架 json 后端

于 2022-04-15 21:16:50 首次发布

本文链接：https://blog.csdn.net/weixin_44084096/article/details/124202807

版权

引言：
在前后端交互的过程中，数据的传输可以说是交互的核心，这篇博客是对前端向后端传输图片的介绍。后端使用的是SpringMvc框架，前端使用的是Vue.2x结合ElementUi组件库实现交互。

MultipartFile的使用

MultipartFile为org.springframework.web.mutipart包下的一个类，MultipartFile翻译成中文来讲就是“多组件的文档”，一般来讲使用MultipartFile这个类主要是来实现以表单的形式进行文件上传功能。具体使用可以去看看他的源码哈哈哈话不多说直接演示。

1. 在pom.xml中引入jar包

        <dependency>
           <groupId>commons-fileupload</groupId>
           <artifactId>commons-fileupload</artifactId>
           <version>1.3.3</version>
       </dependency>

2.配置springMvc的xml文件

    <!-- 配置文件上传解析器，id 是固定的 multipartResolver -->
   <bean id="multipartResolver"
         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
       <!-- 设置上传大小，单位字节 -->
       <property name="maxUploadSize" value="10485760"/>
   </bean>

注意哈value是字节，我设置的的最大10M
3.配置好了之后就可以写接口了
我是把传输文件封装了一个类，具体代码如下

package com.xu.utils;

import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

public class imgUtil {
   
   public static String savaImg(MultipartFile img, HttpServletRequest request,String imgPath) throws IOException {
   
       //获取图片名
       String imgName=img.getOriginalFilename();
       //获取图片扩展名
       String extendName=imgName.substring(imgName.lastIndexOf(".")+1,imgName.length());
       //使用UUID给图片产生没