springboot+vue+mysql实现前端上传图片到本地并将url存入本地数据库

因为第一次写，查看了一些网上的资料，但大部分给的代码有些少，导致不能很好的使用，所以自己研究以后，决定也写一篇关于上传图片的文章，希望可以帮助到大家。

废话不多说，先看下面的效果图⬇

1、先来看一下效果图：
数据库：

前端界面：

上传前样式：

上传后样式：

本地效果：

以上就是这个功能实现后的代码图，下面我们来看一下具体应该如何实现，这里将包括前端、后端、数据库类型的所有说明，内容非常详细。

一、数据库

我这里是将数据库单独建立了一个表，字段只有三个，分别是主键、url、图片名称。

这里没什么可说的，具体想要几个字段，看个人需要，我这里只列举两个。

二、前端代码

<el-upload class="avatar-uploader" action="#" 
:show-file-list="false"
:on-success="handleAvatarSuccess" 
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>

:on-success:文件上传成功时的钩子。
:before-upload:上传文件之前的钩子，参数为上传的文件。
:show-file-list:是否显示已上传文件列表。
action:上传的地址(实际这里应该写后端的接口)，我这里用#替代一下。

具体说明请参考官方网站：upload讲解的官方网址

js部分代码：

:before-upload的方法

beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

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

			},

:on-success的方法：

			// 文件上传成功时的钩子
			handleAvatarSuccess(res, file){
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(file)
			},

以上就是前端的代码部分。

三、后端代码(java)

实体类：

 	private String picturename;
    private String pictureurl;

    public String getPicturename() {
        return picturename;
    }

    public void setPicturename(String picturename) {
        this.picturename = picturename;
    }

    public static long getSerialVersionUID() {
        return serialVersionUID;
    }

    public String getPictureurl() {
        return pictureurl;
    }

    public void setPictureurl(String pictureurl) {
        this.pictureurl = pictureurl;
    }

yml配置文件：

Controller层：

@RestController
@RequestMapping("路径")
public class ImageurlController {
    @Value("${file.upload-path}")
    private String pictureurl;

//    注入业务逻辑层
    @Autowired
    ServiceImpl Service;
//    单文件上传
    @PostMapping("路径")
    public void upload(MultipartFile file) {
        String fileName = file.getOriginalFilename();
        File saveFile = new File(pictureurl);
        if (!saveFile.exists()) {
            //若不存在该目录，则创建目录
            saveFile.mkdir();
        }
        //new一个实体类
        Imageurl imageurl = new Imageurl();
        //拼接url，采用随机数，保证每个图片的url不同
        UUID uuid = UUID.randomUUID();
        //拼接后的url
        String url = file.getOriginalFilename().replace(".","")+uuid;
        //图片名称
        String name =file.getOriginalFilename();
        //将url和name 分别set
        imageurl.setPictureurl(url);
        imageurl.setPicturename(name);
        //存入数据库，这里可以加if判断
        service.save(imageurl)
        try {
            //将文件保存指定目录
            file.transferTo(new File(pictureurl + fileName));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

返回数据：
前端应该返回的数据

以上就是上传图片的所有有效步骤，如果有疑问，可以私信或者在文章下面留言。

最后，希望本篇文章可以为大家带来帮助，感谢支持，点个关注吧。