vue上传图片到后天Java接口 vue上传图片到数据库

转载

网络小墨舞风 2024-01-30 18:56:44

文章标签 vue上传图片到后天Java接口 vue.js java elementui 上传 文章分类 Java 后端开发

系列文章目录

前言

记录下，想形成写博客的习惯来锻炼自己，有不对的地方请各位在评论中给我指出来，请指点~;以下是pigx+vue+element-ui来实现的

一、大致思路（想法）

1、传入图片

2、后台获取图片名字

3、重新设置名称（防止重复名称）

4、存入地址

5、获取地址

6、存入数据库

二、使用步骤

1.引入库

代码如下（示例）：

<el-upload style="display: flex;margin-left:5px;"   //样式控制，可以不添加
        class="upload-picture"			   //不知道有什么作用，
        :action="actionUrl"			   //上传路径
        :headers="headers"			   //设置请求头，但不知道为啥要传这个token，有晓得的小伙伴说一下
        accept=".jpg,.png"
        multiple="false"			  //是否允许多文件上传，这里就上传一个图片，所以就设置成false了
        :show-file-list="false"			  //是否显示文见列表
        :before-upload="beforeAvatarUpload"       //在文件上传之前执行，一般用于校验上传文件的格式
        :http-request="getFile"			  //自定义上传
        >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
      </el-upload>

2.js部分

代码如下（示例）：

data(){
headers: {
        Authorization: 获取的access_token
      },
actionUrl:'要上传的路径',
PCOrAppRadio:'1',
}
methods: {
beforeAvatarUpload(file) {
        console.log("图片大小",file.size)
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return  isLt2M;
        },
getFile(item) {
      console.log(item.file)
      const fd = new FormData()//设置数据，参考
      fd.append('filename', item.file)
      fd.append('pictureFlag', this.PCOrAppRadio)
      //  const config = { headers: { 'Content-Type': 'multipart/form-data' }}
      //路由将参数传入后台
      addPicture(fd).then(res => {
        if (res.data.data){
          this.$message.success("上传成功！")
        }else {
          this.$message.error("上传失败！")
        }
      })
    },
  }

3.后台

@RestController				//返回类中所有方法返回Json数据
@RequestMapping("/请求路径")
@AllArgsConstructor
@Api(value = "picture", tags = "图片上传")
public class PictureController {
    private final PictureService pictureService;

/*
   * 1、获取的图片
   * 2、获取图片名getOriginalFilename
   * 3、图片存储路径（图片始终都是要在一个地方储存，数据库储存的是读取地址而不是储存地址，一个是在盘服储存，一个是在浏览器中访问）
   * 4、文件上传（file.transferTo()）
   * 5、存入数据库
   * */
@Inner(value = false)
 @PostMapping("/pictureIndex")
 public R uploadPicture(@RequestParam("filename") MultipartFile file ,@RequestParam("pictureFlag") String pictureFlag) throws IOException {
	log.info("接收到的文件数据为：" + file +"  pictureFlag =="+ pictureFlag);
    if (file.isEmpty()) {
      return R.ok("上传文件为空");
    } 
  //文件全名称
  String fileName = file.getOriginalFilename();
  //后缀名
  String suffixName = fileName.substring(fileName.lastIndexOf("."));
  //文件名
  String prefixName = fileName.substring(0, fileName.lastIndexOf("."));
  //上传后的路径
  String filePath = "图片存入服务器\本地盘服的存储路径";
  //随机生成数字
  int anInt = ThreadLocalRandom.current().nextInt();
  // 新文件名 防止同一张图片重复提交名称冲突
  fileName =prefixName + anInt + suffixName;
  //绝对路径--文件的存储路径
  String absolutepath=filePath + fileName;
  //读取路径 http://192.168.xx.xxx:8080/img/这个路径在浏览器中可以访问到，这样重新在数据库中读出来可以直接显示
  String readfilePath = "读取路径";
  String readUrl = readfilePath + fileName;
  //将图片准备写入本地或服务器
  File dest = new File(absolutepath);
  //查看是否有父目录没有则创建
  if (!dest.getParentFile().exists()) {
   dest.getParentFile().mkdirs();
  }
  //声明实体
  Picture picture = new Picture();
  picture.setName(fileName);
  picture.setFlag(pictureFlag);
  picture.setCreateTime(LocalDateTime.now());
  picture.setPath(readUrl);
  //调用mybatis-plus将数据插入数据库
  if(pictureService.save(picture)){
   try {
    //上传图片
    file.transferTo(dest);
    return R.ok(true);
   } catch (IOException e) {
    e.printStackTrace();
   }
  }

service层，略，只声明下，没有任何逻辑
Mapper，略，添加相应的映射文件就行，
注：PigX，实体中声明属性最好是用驼峰，不要有“_”,不然框架解析出来的不一致，导致你某个属性会赋不上去。