上传图片到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中得到所有的数据后 绑定好图片的路径数据

图片路径信息

返回数据