上传图片功能学习

目录

学习目标

学习内容

Vue上传图片

保存图片至数据库

图片展示

学习目标

学习上传图片并保存至数据库

学习内容

Vue上传图片

在vue上传图片采用的是elementUI中的el-upload标签

<el-form-item label="封面图" prop="img">

<el-upload

class="upload-demo"

action="http://ip:port/cakeShop/admin/upload/img"

ref="upload1"

:auto-upload="false"

:data="form"

list-type="picture-card"

:file-list="fileList1"

:before-remove="beforeRemove"

:on-success="uploadSuccess"

:limit="3"

>

<el-button size="small" type="primary">点击上传</el-button>

</el-upload>

</el-form-item>

action提交的是自己的后台地址。

需要注意的是，这个不用自动提交的时候，可以使用ref属性来决定什么时候提交

this.$refs.upload1.submit();

保存图片至数据库

将图片保存至数据库我采用的将图片保存的路径保存至数据库，读取的时候只要直接读取对应的路径就可以了

上传图片接口

@PostMapping("cakeShop/admin/upload/img")

@CrossOrigin

public Object uploadImg(MultipartFile file) {

String folder = "你自己储存图片的路径";

File imageFolder = new File(folder);

String imgURL="";

File f = new File(imageFolder, ImageUtil.getRandomString(6) + file.getOriginalFilename()

.substring(file.getOriginalFilename().length() - 4));

if (!f.getParentFile().exists())

f.getParentFile().mkdirs();

try {

file.transferTo(f);

imgURL = "/pic/" + f.getName();

System.out.println(imgURL);

s=s+imgURL+",";

if(imgURL!="") return new ReturnObject("1","上传成功");

} catch (IOException e) {

e.printStackTrace();

}

return new ReturnObject("0","上传失败");

}

上述接口主要是将图片保存到对应文件夹，并生成路径，其中图片的名字是随机生成的。我是将图片直接保存在项目的resources的static目录下。

数据库中的存储的路径

其实这个路径是网址访问图片的路径，需要在配置文件中进行路径映射配置。

@Configuration

public class URLConfig extends WebMvcConfigurerAdapter {

@Override

public void addResourceHandlers(ResourceHandlerRegistry registry) {

registry.addResourceHandler("/pic/**").addResourceLocations("你图片保存的路径");

super.addResourceHandlers(registry);

}

}

图片展示

通过后台接口将数据库中的路径返回至vue界面，然后通过地址的拼接，就可以在页面上进行展示

this.imgUrl = "http://ip:port" + 数据库中的地址;