開發中必備的文件的上傳與下載

大家好，我是每天都要不斷瘋狂學習不斷
提昇自我的    Cx_330

文件的上傳和下載

說明

本片博文是基於reggie項目，
使用的技術包含SpringBoot 
MybatisPlus    

在前後端進行文件的傳輸最後實現圖片在
前端的展示的效果，學會這個小知識點還
是很必要的！

文件上傳需掌握

• 在瀏覽器上要完成文件的上傳和下載這個需求，首先我們需要對前端知識有一定的了解
• 圖片以錶格為框架上傳
• MEthod為Post
• Input 的Type為 File

---

🧊前端實戰剖析

• 例子

---

• 首先 打開要訪問的文件上傳頁面

• 然後我們點開之後隨機選擇一張圖片

---

• 我們會發現 當我們點擊一張圖片的時候，瀏覽器的控制臺出現了兩個文件
  • 上傳文件
  • 下載文件
• 這個過程其實是和服務器進行了信息傳輸

---

• 打開上傳文件
• 

• 可以發現請求方式是Post 然後通過一個請求路徑請求我們的服務器，我們的服務器接收之後做進一步的處理

---

• 

• 可以看到，服務器響應回來的信息就是圖片的名稱

---

• 點擊文件下載的那個文件
• 

• 可以看出兩點重要的信息
  • 通過Get方式去請求
  • 傳遞的參數是圖片的名稱
• 

• 因為服務器端的響應其實就是直接將圖片給展示在瀏覽器上面了，所以沒有返回值

---

後端代碼實戰

• 文件的上傳與下載

@RestController
@Slf4j
@RequestMapping("/common")
public class CommonConntroller {
     

    //通過el錶達式 可以使用yml配置文件裏面的路徑
    @Value("${reggie.path}")
    private String basePath;

    /** * 文件上傳 * @param file * @return */
    @PostMapping("/upload")
    public R<String> upload(MultipartFile file){
     
        //name是一個臨時文件 需要轉存到指file定比特置 否則本次請求完成後臨時文件會被删除
        log.info(file.toString());

        //獲取原始文件名
        String originalFilename = file.getOriginalFilename();
        //不建議用這種方法 因為當文件名一樣時 後面圖片會覆蓋前面圖片
        String s = originalFilename.substring(originalFilename.lastIndexOf("."));
        //可以使用UUID生成隨機文件名
        String imageName = UUID.randomUUID().toString() + s;
        //判斷basePath目錄是否存在 如果不存在先創建目錄
        File f = new File(basePath);
        if(!f.exists()){
     
            f.mkdirs();
        }
        try {
     
            //降臨時文件轉換到指定比特置
            file.transferTo(new File(basePath+imageName));
        } catch (IOException e) {
     
            e.printStackTrace();
        }
        return R.success(imageName);
    }

    /** * 文件下載 * @param name * @param response */
    @GetMapping("/download")
    public void dowmLoad(String name, HttpServletResponse response){
     

        try {
     
            //通過輸入流 讀取文件內容
            FileInputStream inputStream = new FileInputStream(new File(basePath+name));
            //通過輸出流將文件寫回瀏覽器 在瀏覽器展示圖片
            response.setContentType("image/jpeg");
            ServletOutputStream outputStream = response.getOutputStream();
            int length=0;
            byte[] bytes = new byte[1024];
            while ((length=inputStream.read(bytes))!=-1){
     
                outputStream.write(bytes,0,length);
                outputStream.flush();
            }
            //關閉io資源
            outputStream.close();
            inputStream.close();
        } catch (IOException e) {
     
            e.printStackTrace();
        }
    }
}

---

• 注意我那個BasPath是已經在配置文件裏面定義好了，所以可以直接通過el錶達式的形式進行使用
• 這樣做的好處就是可以動態指定下載文件的地址，便於後期的維護

---

• 在文件下載的時候還用到了UUID這個方法

•  UUID.randomUUID().toString()
  

• 好處就是防止文件名重複。

---

• 有個小知識點可能大家平時會忽略

• String s = originalFilename.substring(originalFilename.lastIndexOf("."));
  

• 先通過lastIndexOf方法找到.的下標索引，然後在通過substring分割 注意這個分割之後的字符串包含 .

---

• 然後文件下載的話

• FileInputStream inputStream = new FileInputStream(new File(basePath+name));
  

• 這行代碼可能要多注意一下，可能會不小心犯錯，構建一個字節輸入流，在new file的時候一定要是這個圖片的具體路徑全名

---

• 其餘的都是一些IO一些基本的操作，只要基礎牢固，剩下的都不是問題