利用Springboot+vue實(shí)現(xiàn)圖片上傳至數(shù)據(jù)庫(kù)并顯示的全過(guò)程

更新時(shí)間：2023年04月12日 09:59:12 作者：是阿覃呀！

最近遇到個(gè)需求,需要將圖片在前端上傳到服務(wù)器進(jìn)行保存,然后讀取到前端進(jìn)行展示,這篇文章主要給大家介紹了關(guān)于利用Springboot+vue實(shí)現(xiàn)圖片上傳至數(shù)據(jù)庫(kù)并顯示的相關(guān)資料,需要的朋友可以參考下

一、前端設(shè)置

前端是Vue + Element-UI 采用el-upload組件（借鑒官方）上傳圖片：

<el-upload
     ref="upload"
     class="avatar-uploader"
     action="/setimg"
     :http-request="picUpload"
     :show-file-list="false"
     :auto-upload="false"
     :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload">
   <img v-if="$hostURL+imageUrl" :src="$hostURL+imageUrl" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>

<el-button type="primary" @click="submitUpload">修改</el-button>

action在這里可以隨便設(shè)置，因?yàn)樵诤竺嬗?:http-request 去自己設(shè)置請(qǐng)求，注意由于是自己寫請(qǐng)求需要 :auto-upload=“false” ，并且由于是前后端連接要解決跨域問(wèn)題，所以在 $hostURL+imageUrl 定義了一個(gè)全局變量：

//在main.js中
	Vue.prototype.$hostURL='http://localhost:8082'

在methods中：

methods:{
//這里是官方的方法不變
	handleAvatarSuccess(res, file){
	      this.imageUrl = URL.createObjectURL(file.raw);
	},
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上傳頭像圖片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上傳頭像圖片大小不能超過(guò) 2MB!');
      }
      return isJPG && isLt2M;
    },
//這里是自定義發(fā)送請(qǐng)求
    picUpload(f){
     let params = new FormData()
     //注意在這里一個(gè)坑f.file
     params.append("file",f.file);
     this.$axios({
       method:'post',
       //這里的id是我要改變用戶的ID值
       url:'/setimg/'+this.userForm.id,
       data:params,
       headers:{
         'content-type':'multipart/form-data'
       }
     }).then(res=>{
     //這里是接受修改完用戶頭像后的JSON數(shù)據(jù)
       this.$store.state.menu.currentUserInfo=res.data.data.backUser
       //這里返回的是頭像的url
       this.imageUrl = res.data.data.backUser.avatar
     })
   },
   //觸發(fā)請(qǐng)求
    submitUpload(){
   this.$refs.upload.submit();
 	}
}

在上面代碼中有一個(gè)坑 f.file ，我看了許多博客，發(fā)現(xiàn)有些博客只有 f 沒(méi)有 .file 導(dǎo)致出現(xiàn)401、505錯(cuò)誤。

二、后端代碼

1.建立數(shù)據(jù)庫(kù)

這里頭像avatar是保存的上傳圖片的部分url

2.實(shí)體類、Mapper

實(shí)體類：

采用mybatis plus

@Data
public class SysUser extends BaseEntity{
//這里的BaseEntity是id,statu,created,updated數(shù)據(jù)
    private static final Long serialVersionUID = 1L;

    @NotBlank(message = "用戶名不能為空")
    private String username;

//    @TableField(exist = false)
    private String password;
    @NotBlank(message = "用戶名稱不能為空")
    private String name;
    //頭像
    private String avatar;

    @NotBlank(message = "郵箱不能為空")
    @Email(message = "郵箱格式不正確")
    private String email;
    private String tel;
    private String address;
    @TableField("plevel")
    private Integer plevel;
    private LocalDateTime lastLogin;
}

@Mapper
@TableName("sys_user")
public interface SysUserMapper extends BaseMapper<SysUser> {
}

3.接受請(qǐng)求，回傳數(shù)據(jù)

    @Value("${file.upload-path}")
    private String pictureurl;
    @PostMapping("/setimg/{id}")
    public Result setImg(@PathVariable("id") Long id, @RequestBody MultipartFile file){
        String fileName = file.getOriginalFilename();
        File saveFile = new File(pictureurl);
        //拼接url，采用隨機(jī)數(shù)，保證每個(gè)圖片的url不同
        UUID uuid = UUID.randomUUID();
        //重新拼接文件名，避免文件名重名
        int index = fileName.indexOf(".");
        String newFileName ="/avatar/"+fileName.replace(".","")+uuid+fileName.substring(index);
        //存入數(shù)據(jù)庫(kù)，這里可以加if判斷
        SysUser user = new SysUser();
        user.setId(id);
        user.setAvatar(newFileName);
        sysUserMapper.updateById(user);
        try {
            //將文件保存指定目錄
            file.transferTo(new File(pictureurl + newFileName));
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println("保存成功");
        SysUser ret_user = sysUserMapper.selectById(user.getId());
        ret_user.setPassword("");
        return Result.succ(MapUtil.builder()
                .put("backUser",ret_user)
                .map());
    }

yml文件中圖片的保存地址：

file:
  upload-path: D:\Study\MyAdmin\scr

三、顯示圖片

1.后端配置

實(shí)現(xiàn)前端Vue :scr 更具url顯示頭像圖片，則必須設(shè)置WebMVC中的靜態(tài)資源配置

建立WebConfig類

@Configuration
public class WebConfig implements WebMvcConfigurer{
    private String filePath = "D:/Study/MyAdmin/scr/avatar/";
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/avatar/**").addResourceLocations("file:"+filePath);
        System.out.println("靜態(tài)資源獲取");
    }
}

這樣就可是顯示頭像圖片了

2.前端配置

注意跨域問(wèn)題以及前面的全局地址變量

vue.config.js文件(若沒(méi)有則在scr同級(jí)目錄下創(chuàng)建)：

module.exports = {
    devServer: {
        // 端口號(hào)
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        // 配置不同的后臺(tái)API地址
        proxy: {
            '/api': {
            //后端端口號(hào)
                target: 'http://localhost:8082',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => {}
    }
}

main.js:

	axios.defaults.baseURL = '/api'

總結(jié)

到此這篇關(guān)于利用Springboot+vue實(shí)現(xiàn)圖片上傳至數(shù)據(jù)庫(kù)并顯示的文章就介紹到這了,更多相關(guān)Springboot vue圖片上傳至數(shù)據(jù)庫(kù)并顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: