上传图片功能学习

目录

学习目标

学习内容

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) {
        //文件磁盘图片url 映射
        //配置server虚拟路径，handler为前台访问的目录，locations为files相对应的本地路径
        registry.addResourceHandler("/pic/**").addResourceLocations("你图片保存的路径");
        super.addResourceHandlers(registry);
    }
}

图片展示

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

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