上传图片到cos服务器并且把图片路径存到数据库
方式一 （）
1.数据库新建表 把图片路径单独存到一个图片表
新建图片表
2.后台自动生成代码
自动生成代码
3.controller的写法（其他无非就是增删改查）
package com.catgo.user.controller;
import com.catgo.common.core.Result;
import com.catgo.common.utils.StringUtils;
import com.catgo.user.common.COSFileStorage;
import com.catgo.user.entity.TbUser;
import com.catgo.user.entity.UserImg;
import com.catgo.user.service.ITbUserService;
import com.catgo.user.service.IUserImgService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.time.LocalDateTime;
/**
* <p>
* 前端控制器
* </p>
*
* @author huangshuai
* @since 2019-09-20
*/
@Slf4j
@CrossOrigin
@RestController
@RequestMapping("/user")
@Api(tags = {"1、会员API"})
public class TbUserController {
@Autowired
private ITbUserService iTbUserService;
@Autowired
private COSFileStorage cosFileStorage;
@Autowired
private IUserImgService iUserImgService;
//*****************头像上传*******************
@PostMapping("/avatarUpload")
public Result upload(MultipartFile file,Long id){
String filename=file.getOriginalFilename();
log.info("filename" + filename);
String imgPath = "";
try {
imgPath=cosFileStorage.fileUpload(file.getInputStream(), StringUtils.getFileExt(filename));
//点击上传之后要把此路径保存到数据库
log.info("cos存储图片路径为"+imgPath);
if(org.apache.commons.lang.StringUtils.isNotEmpty(imgPath)){
//把COS里的url图片链接及其他信息存到数据库里
//UserImg userImg=new UserImg();
//userImg.setImageType(1);
//userImg.setDeleted(10);
//userImg.setCreateTime(LocalDateTime.now());
//userImg.setImagePath(imgPath);
//iUserImgService.addAvatarUpload(userImg);
//根据登陆的id找到对应用户然后把图片路径给添加上
Long id1=1170L;
TbUser tbUser = new TbUser();
tbUser.setId(id1);
tbUser.setImagePath(imgPath);
iTbUserService.selfUpdateById(tbUser);
//将图片上传到数据库 并返回图片id到用户表里
//Long imgId = iUserImgService.getIdByImgPath(imgPath);
return Result.ok(imgPath);
}
} catch (IOException e) {
e.printStackTrace();
}
return Result.fail("上传失败");
}
}
// @DeleteMapping("file/{filename}")
// public Result upload(@PathVariable("filename") String filename){
// // 删除文件
// cosFileStorage.fileDelete(filename);
// return Result.ok("删除成功");
// }
// @GetMapping("file/{filename}")
// public Result download(@PathVariable("filename") String filename){
// // 下载文件
// try {
// String str= cosFileStorage.fileDownload(filename);
// return Result.ok("下载成功",str);
// } catch (Exception e) {
// e.printStackTrace();
// }
// return Result.fail("下载失败");
// }
3.1 怎么上传到cos并且返回图片路径的
关键的写法
4.前台组件写法
在页面里直接把组件加进来，action很关键，连接后台。
组件页面写法
同样的 把方法也直接考过来 并且不需要我们写response
组件方法
这句话就是连接后台服务器的
this.imageUrl = URL.createObjectURL(file.raw);
5.前台数据是怎么绑定的
5.1别忘了v-model绑定返回回来的图片路径
前台绑定数据
5.2 从user中得到所有的数据后 绑定好图片的路径数据
图片路径信息
返回数据
