Vue+Element-UI+SpringBoot完成图片上传、回显

Vue+Element-UI+SpringBoot完成图片上传、回显

• • 前端部分代码
  • 后端代码
  • 效果截图
  • 结束
  • 参考

本人在校菜鸡，练习图片上传出现些问题，网罗大神操作才实现，在这记录一下

前端部分代码

待提交的部分表单

<template>
	<div>
		// 这里是提交的表单数据
		<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
			
		</el-form>
		// 头像上传
        <el-form-item label="头像" prop="chairImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/chairman/uploadimg"
            :show-file-list="false"
            multiple
            :limit="1"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <!-- 构建虚拟路径 -->
            <img v-if="editForm.chairImg" :src=" 'http://localhost:9999/api/file/' + editForm.chairImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
	</div>
</template>

解释：
action：图片提交的后端位置；
editForm.chairImg：后端传来保存在数据库中的图片名称，editForm保存在data中；
src：其中的http://localhost:9999/api/file/是后端配置的本机存放图片的虚假路径，后面会说；

data中的部分数据

<script>
	export default {
		data() {
			editForm: {}, // 修改信息的表单数据
		},
		  methods: {
		    handleAvatarSuccess(res) {
	          // 把图片名给img
	          this.editForm.chairImg = res;
	        },
		    beforeAvatarUpload(file) {
		      // 设置限定格式
		      const img_mimetype = ['image/jpeg','image/jpg','image/png']
		      const isJPG =  img_mimetype.includes(file.type);
		      const isLt2M = file.size / 1024 / 1024 < 2;
		      if (!isJPG) {
		        this.$message.error('上传头像只能是图片格式!');
		        return false;
		      }
		      if (!isLt2M) {
		        this.$message.error('上传头像图片大小不能超过 2MB!');
		        return false;
		      }
		      return isJPG && isLt2M;
		    },
		    // 提交修改的表单数据
    		editChairmans(){
			  const {data: rese} = await this.$http.post('/chairman/editChairmans',this.editForm);
			}

	}
</script>

其中handleAvatarSuccess和beforeAvatarUpload是element-ui官网给出。

后端代码

这里只贴图片上传

@RestController
@RequestMapping("/chairman")
public class ChairmanController {
	/**
     * 图片上传
     */
    @PostMapping("/uploadimg")
    public String uploadimg(MultipartFile mFile) throws IOException {
       // 定义存储图片的地址
        String folder = "D:/WebFile/file/img";
        // 文件夹
        File imgFolder = new File(folder);
        // 获取文件名
        String fname = file.getOriginalFilename();
        // 获取文件后缀
        String ext = "." + fname.substring(fname.lastIndexOf(".")+1);
        // 获取时间字符串
        String dateTimeFormatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmss").format(LocalDateTime.now());
        // 生成新的文件名
        String newFileName = dateTimeFormatter + UUID.randomUUID().toString().replaceAll("-","") + ext;
        // 文件在本机的全路径
        File filePath = new File(imgFolder, newFileName);
        if (!filePath.getParentFile().exists()){
            filePath.getParentFile().mkdirs();
        }
        try{
            file.transferTo(filePath);
            // 返回文件名
            return filePath.getName();
        }catch (IOException e){
            e.printStackTrace();
            return "";
        }
    }
}

注意：这里只返回的文件名，所以前端代码才有http://localhost:9999/api/file/，这个是对应于本机存储路径的，需要在WebConfig中进行配置：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    /**
     * 跨域配置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        WebMvcConfigurer.super.addCorsMappings(registry);
        registry.addMapping("/**") // 访问所有东西都跨域
                .allowedOrigins("Http://localhost:8080","null")
                //.allowedHeaders("*")
                .allowedMethods("POST","GET","PUT","OPTIONS","DELETE") //
                .maxAge(3600) // 最大响应时间
                .allowCredentials(true); // 是否携带信息
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/api/file/**").addResourceLocations("file:" + "D:/WebFile/file/img/");
    }
}

我这里把上传的图片存在D盘下的文件夹。

效果截图

前端

1、未插入图片前（css有点问题，不影响上传）

2、插入图片

3、文件夹显示

4、数据库

结束

注意：图片上传成功只是上传本地文件夹成功，返回的图片名需要自己提交表单到数据库噢~
小菜鸡告辞~~~

参考

不要忘了引用他人贡献噢~
参考博客