Vue+SpringBoot实现图片上传MySQL数据库并使用

上传：

Vue：

<el-upload
    action="http://localhost:8087/SickBay/image/user/update"
    :data="User"
    list-type="picture-card"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>


<script>
import { Plus } from "@element-plus/icons-vue";
export default {
  data() {
    return {
      form: {},
      User: {
        username: "",
      },
    };
  },
  created() {
    this.User.username = localStorage.getItem("username");
  },
  methods: {},
};
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

MySQL

图片字段设置longblob

SpringBoot

Entity、Mapper、Service、Impl、XML照常写，省略。

Controller

package cn.itsource.sickbay.Controller;

import cn.itsource.sickbay.Common.R;
import cn.itsource.sickbay.Entity.User;
import cn.itsource.sickbay.Service.IuserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.math.BigInteger;

@RestController
@CrossOrigin(origins = "*")
@RequestMapping("/image")
public class ImageOptController {
    @Autowired
    private IuserService service;

    @PostMapping("/user/update")
    public R upload(@RequestParam("file") MultipartFile file, @RequestParam("username") String uname) {
        try {

            byte[] fileContent = file.getBytes();
            User user = new User();
            user.setImg(fileContent);
            BigInteger username = new BigInteger(uname);
            user.setUsername(username);
            return R.OK().setData(service.updateUserImage(user));
        } catch (Exception e) {
            e.printStackTrace();
            return R.OK().setCode(202).setMsg("上传失败");
        }
    }
}

至此，上传成功，可在数据库查看图片

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前端显示

后端正常返回Json对象数据

1.使用图片的位置   :src

<el-avatar  :size="55"
            :src="Avatar"
            shape="circle"
            class="user-avatar"/>
<!-- <img :src="Avatar" alt="Image" /> -->

2.处理后端返回的数据

 FindInfo(this.username).then((res) => {
      let str = `data:image/jpg;base64,${res.data.data.img}`;//获取数据
      this.Avatar = str.replace(/[\r\n]/g, "");//去除空格，否则会导致图片碎开
      this.address = res.data.data.address;
      this.name = res.data.data.name;
    });