图片上传功能实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

实现一下图片上传回显功能。

一、实现思路

大致讲一下思路，具体的细节，会在代码中作注释。前端将图片发送到后端，后端将图片存到服务器，然后返回存储图片的地址到前端，前端通过图片地址回显图片。

二、实现代码

1.前端代码

需要注意的点：
1、上传图片的input样式比较固定，所以我决定隐藏input，通过按钮来触发input。隐藏的时候，不能用display:none,因为document.getElementById不能获取。换个思路我就把input的宽、高设置为0。
2、通过document.getElementById().files[0]获取上传的照片，通过fileReader解析图片，并赋值给缩略图的src。

vue代码如下：

<template>
  <div class="test">

    <!--使用input标签，并通过type和accept属性限定图片类型。-->
    <!--这里这样设计是因为：input这个颜色、样式是固定的，所以我就把它的宽、高设为0，然后通过一个按钮来触发-->
    <!--选择图片时，点击确定后会触发onchange方法，给缩略图url赋值-->
    <input class="uploads" id="select" type="file" v-on:change="changeImg" accept="image/*"/>
    <button class="clicks" v-on:click="select">选择图片</button>
    <button class="clicks" v-on:click="upload">上传图片</button>
    <!--缩略图-->
    <img class="imgs" :src="urls"/>
    <!--回传图片-->
    <img class="imgs" :src="urls1"/>
  </div>
</template>
<script>
export default {
  name: "test",
  data(){
    return {
      urls: ' ',
      urls1: ' '
    }
  },
  methods:{
    changeImg(){
      let that = this;
      //新建文件读取对象
      let reader = new FileReader();
      //读取上传的图片
      reader.readAsDataURL(document.getElementById("select").files[0]);
      //加载
      reader.onload = function (){
        //将加载的值赋值给缩略图src
        that.urls = this.result;
      }
    },
    upload(){
      let that = this;
      let formdData = new FormData();
      formdData.append('files',document.getElementById("select").files[0]);
      that.$axios.defaults.baseURL='http://localhost:8081'
      that.$axios({
        method: 'post',
        url: '/test/upload',
        data: formdData,
        headers: {"Content-Type": "multipart/form-data"}//设置Content-Type类型
      }).then((result) => {
        console.log(result);
        that.urls1 = result.data;
      });
    },
    select(){
      //触发点击input
      document.getElementById("select").click();
    }
  }
}
</script>
<style scoped>
@import "../assets/css/test.css";
</style>

css代码如下：

.test{
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-top: 20px;
}
.uploads{
   width: 0;
   height: 0;
   overflow: hidden;
}
.clicks{
  width: 100px;
  height: 30px;
  background-color: #409eff;
  color: white;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin: 0 0 0 50px;
}
.imgs{
  width: 100px;
  height: 100px;
  margin-left: 50px;
}

2.后端代码

因为是练习，所以后端就不写service层了，直接再controller里面写了。这里要要注意，图片名如果相同，会覆盖掉原来的。可以通过拼接当前时间戳和图片名new Date().getTime()+filename解决。

package com.example.myblog.controller;

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.Date;

@RestController
@RequestMapping("/test")
public class TestController {

    @RequestMapping(value="/upload",method={RequestMethod.POST})
    @ResponseBody
    public String upload(MultipartFile files){
        //获取图片名称
        String filename = files.getOriginalFilename();
        //指定图片存放位置，这里要要注意，图片名如果相同，会覆盖掉原来的。可以通过拼接当前时间戳和图片名解决
        File file = new File("E:\\apache-tomcat-9.0.60-windows-x64\\images\\test\\"+new Date().getTime()+filename);
        if(!file.exists()){
            file.mkdirs();
        }
        try {
            //存储图片
            files.transferTo(file);
        } catch (IOException e) {
            e.printStackTrace();
        }
        //图片访问地址
        String imgUrl = "http://localhost:8084/images/test/"+filename;
        return imgUrl;
    }
}

3.效果

总结

上面是单张图片上传、缩略图、回显功能的前后端实现。如果是多张图片的话，构思要复杂一些，但是用到的知识点是一样。有兴趣可以试试。