vue 和 ssm框架上传图片

一，pom.xml中配置jar包

<!-- 文件传输 -->
<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.6</version>
</dependency>
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.3</version>
</dependency>

二，在springMVC配置文件中配置

	<!--同时让springMVC不要拦截这些静态资源 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--		上传文件大小上限，单位为字节（10MB）-->
		<property name="maxUploadSize">
			<value>20971520</value>
		</property>
<!--		 请求的编码格式，必须和JSP的pageEncoding属性一致，以便正确读取表单的内容，默认为ISO-8859-1-->
		<property name="defaultEncoding">
			<value>UTF-8</value>
		</property>
	</bean>

三，导入工具类

public class FileTools {

    //图片上传的返回值就是图片上传之后的新名称
    public static String uploadFile(MultipartFile picture, HttpServletRequest request) {
        //现在的工作是：想办法把用户传过来的文件存储到我们的电脑中
        //先得到原图片的图片名
        String fileName = picture.getOriginalFilename();
        try {
            //得到用户存文件的路径,其实就是项目在我们电脑中的位置
            //realPath就是当前项目在我们电脑硬盘中的位置
            String realPath = request.getSession().getServletContext().getRealPath("/");
            //通过项目目录和图片文件夹名创建一个文件对象
            File file = new File(realPath + "images/");
            //注意，java中的文件对象，不会帮我们自动创建文件夹
            //判断该文件夹是否存在，如果已经存在，不创建
            if (!file.exists()) {
                //mkdir    创建文件夹
                file.mkdir();
            }
            //现在我们将图片根据路径存到文件夹中之前需要将图片重命名
            //UUID 生成32位不重复的字母-数字的字符串
            //fileName  == >    彪.jpg
            UUID randomUUID = UUID.randomUUID();
            //先将原文件的后缀名取出来
            String houzhui = fileName.substring(fileName.lastIndexOf("."));
            //将UUID和原文件后缀拼接在一起
            fileName = randomUUID + houzhui;
            picture.transferTo(new File(realPath + "images/" + fileName));
            //将文件名传回给前端
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        //直接将文件夹名称和图片名拼在一起返回
        return "images/" + fileName;
    }

    //下载

    //图片上传的返回值就是图片上传之后的新名称 G:\tianman\library-management-system-master\library-management-system-master\tmsy\target\tmsy\images/aaa.png
    public static void downlodFile(String imgName, HttpServletRequest request, HttpServletResponse response) {
        String realPath = request.getSession().getServletContext().getRealPath("/");

        //获取完整路径
        String allName = realPath + imgName;
        File file = new File(allName);
        response.setContentType("application/x-msdownload");
        response.setHeader("Content-Disposition", "attachment;filename=" + imgName);
        try {
            Files.copy(file.toPath(), response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

四，在后段写上传和下载的方法

@PostMapping("uploadFile")
    public Map<String,Object> uploadFile(MultipartFile file, HttpServletRequest request){
        Map<String,Object> map = new HashMap<>();
        String fileName = FileTools.uploadFile(file, request);
        map.put("code",2000);
        map.put("data",fileName);
        return map;
    }

    @GetMapping("downloadFile")
    public void downloadFile(String fileName, HttpServletRequest request, HttpServletResponse response){
        FileTools.downloadFile(fileName,request,response);
    }

五，在vue展示

songPic是实体类里的图片的属性名字

<el-table-column label="歌曲照片">
        <template slot-scope="scope">
          <img
            v-if="scope.row.songPic"
            style="width: 90px; height: 90px"
            :src="
              'http://localhost:8081/song/downloadFile.do?fileName=' +
              scope.row.songPic
            "
            class="avatar"
          />
          <p v-else>暂无图片</p>
        </template>
      </el-table-column>

新增

data里面需要定义  imageUrl =""

    <el-form-item label="歌曲图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8081/song/uploadFile.do"
            :show-file-list="false"
            //name属性默认是file 和后端对应
            name="file"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
              style="width: 170px; height: 170px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>



    //成功的方法
    handleAvatarSuccess(res, file) {
      this.imageUrl = this.imageUrl = URL.createObjectURL(res.raw);
      this.form.songPic = res.data;
    },
    ///文件上传前执行的 限制大小限制的
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 50;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 50MB!");
      }
      return isJPG && isLt2M;
    },