快捷導(dǎo)航

springboot + vue+elementUI實(shí)現(xiàn)圖片上傳功能

更新時(shí)間：2025年01月10日 10:58:01 作者：BestArsenaI

文章描述了如何使用Element UI的el-upload組件實(shí)現(xiàn)前端圖片上傳,并將圖片存儲(chǔ)到后端數(shù)據(jù)庫(kù),同時(shí)在頁(yè)面上回顯上傳的圖片,后端通過(guò)接口接收?qǐng)D片,并將其存儲(chǔ)在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

1.實(shí)現(xiàn)背景

前端上傳一張圖片，存到后端數(shù)據(jù)庫(kù)，并將圖片回顯到頁(yè)面上。上傳組件使用現(xiàn)成的elementUI的el-upload。、

2.前端頁(yè)面

<el-upload
   class="upload-demo"
   action="http://xxxx.xxx.xxx:9090/file/upload" 
   :show-file-list="false"
   multiple
   :limit="3"
   :on-success="handleAvatarSuccess1"
   >
   	 <img v-if="package1" :src="package1" class="avatar" alt="">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>

點(diǎn)擊上傳后，將圖片發(fā)送到action后面的接口，之后后端返回圖片，回顯到img標(biāo)簽。

3.接口實(shí)現(xiàn)

前提：SQL已有一張image表：

application.yml文件中配置圖片存儲(chǔ)的位置

files:
  upload:
    path: /www/nndemo/sb/ #這里是服務(wù)器的文件位置，如果是本地項(xiàng)目，改成某磁盤某文件夾即可

接口實(shí)現(xiàn)：

package com.tt.springboot.controller;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import com.tt.springboot.entity.Images;
import com.tt.springboot.mapper.FileMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;
/**
 * @author TT
 * @date 2023-10-26 14:47:13
 * @description 文件上傳下載接口
 * @parms file 前端傳遞過(guò)來(lái)的文件
 */
@RestController
@RequestMapping("/file")
public class FileController {
    @Autowired
    FileMapper fileMapper;
    @Value("${files.upload.path}")
    private String fileUploadPath; //圖片最終存儲(chǔ)的位置
    @PostMapping("/upload")
    public String upload(@RequestParam MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename(); //原始名稱
        String type = FileUtil.extName(originalFilename);//文件類型
        long size = file.getSize(); //大小
        //存儲(chǔ)到磁盤
        File uploadParentFile = new File(fileUploadPath);
        if (!uploadParentFile.exists()){ //文件目錄是否存在
            uploadParentFile.mkdirs();
        }
        //定義一個(gè)文件唯一標(biāo)識(shí)碼
        String uuid = IdUtil.fastSimpleUUID();
        String fileUuid = uuid + StrUtil.DOT + type;
        File uploadFile = new File(fileUploadPath + fileUuid);
        //把獲取到的文件存儲(chǔ)到磁盤中去
        file.transferTo(uploadFile);
        //存儲(chǔ)到數(shù)據(jù)庫(kù)
        String url = "http://xxxx.xxxx.xxx:9090/file/" + fileUuid;
        Images saveFiles = new Images();
        saveFiles.setName(originalFilename);
        saveFiles.setSize(size);
        saveFiles.setType(type);
        saveFiles.setUrl(url);
        fileMapper.saveFile(saveFiles); // 存入數(shù)據(jù)庫(kù)，這里項(xiàng)目比較簡(jiǎn)單，沒有三層架構(gòu)
        return url;
    }
    @GetMapping("/{fileUUID}")
    public void download( HttpServletResponse response, @PathVariable String fileUUID) throws IOException {
        File uploadFile = new File(fileUploadPath + fileUUID);
        ServletOutputStream outputStream = response.getOutputStream();
        response.setHeader("Content-Disposition","attachment;filename=" + URLEncoder.encode(fileUUID,"UTF-8"));
        response.setContentType("application/octet-stream");
        outputStream.write(FileUtil.readBytes(uploadFile));
        outputStream.flush();;
        outputStream.close();
    }
}

fillMapper實(shí)現(xiàn)：

@Mapper
public interface FileMapper {
    @Insert("insert into images(name,size,type,url) values (#{name},#{size},#{type},#{url})")
    void saveFile(Images files);
}

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

您可能感興趣的文章: