目錄

總體介紹

文件上傳

介紹

文件上傳的前端需求

文件上傳的前端代碼

文件上傳的后端需求

文件上傳的后端代碼

文件下載

介紹

前端需求

前端代碼

后端需求

后端代碼

總體介紹

文件的上傳和下載功能，是項(xiàng)目開發(fā)過程中比較常見的業(yè)務(wù)需求，我們?cè)诳蛻舳吮徽宫F(xiàn)的視覺效果通過如下：在項(xiàng)目前端頁面的提示下將本地文件加入到瀏覽器的具體位置，之后瀏覽器直接將這個(gè)圖片回顯了，具體效果如下：

?但是在我們視覺效果下的上傳文件并非單一的文件上傳過程：而是由文件的上傳和下載兩部分組成，即文件從客戶端本地上傳到服務(wù)器和由服務(wù)器把文件在瀏覽器進(jìn)行回顯（下載到服務(wù)器中），接下來我們對(duì)兩個(gè)過程進(jìn)行具體介紹

文件上傳

介紹

文件上傳，也稱為上傳，是指將本地圖片、視頻、音頻等文件上傳到服務(wù)器上，可以供其他用戶瀏覽或下載的過程.文件上傳在項(xiàng)目中應(yīng)用非常廣泛，我們經(jīng)常發(fā)微博、發(fā)微信朋友圈都用到了文件上傳功能.

文件上傳的前端需求

?但是在實(shí)際的開發(fā)過程中，前端頁面有關(guān)這一部分的設(shè)計(jì)通常是使用組件進(jìn)行封裝，例如使用element-ui在完成功能實(shí)現(xiàn)的基礎(chǔ)上實(shí)現(xiàn)了對(duì)上傳組件頁面設(shè)計(jì)的優(yōu)化。（底層仍然是使用post表單的方式進(jìn)行發(fā)送請(qǐng)求）

如下：

文件上傳的前端代碼

具體實(shí)現(xiàn)上傳功能的element-ui的代碼如下：
?

 <div class="addBrand-container" id="food-add-app">
    <div class="container">
        <el-upload class="avatar-uploader"
                action="/common/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeUpload"
                ref="upload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar"></img>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
  </div>

文件上傳的后端需求

服務(wù)端要接收客戶端頁面上傳的文件，通常都會(huì)使用Apache的兩個(gè)組件:

• commons-fileupload
• commons-io

Spring框架在spring-web包中對(duì)文件上傳進(jìn)行了封裝，大大簡(jiǎn)化了服務(wù)端代碼，我們只需要在Controller的方法中聲明一個(gè)MultipartFile類型的參數(shù)即可接收上傳的文件，例如:

關(guān)于對(duì)于文件上傳的后端實(shí)現(xiàn)邏輯，一般是如下的實(shí)現(xiàn)思路：

1.首先使用MultipartFile類的形參接收客戶端傳來的文件，我們需要注意的是：MultipartFile類對(duì)象接收到文件之后，會(huì)對(duì)文件進(jìn)行一個(gè)暫存，生成一個(gè)臨時(shí)文件，當(dāng)我們結(jié)束此次傳輸過程之后，無論是否對(duì)文件進(jìn)行了轉(zhuǎn)存，這個(gè)臨時(shí)文件都會(huì)消失，

2.因此我們下一步的操作就是對(duì)這個(gè)暫時(shí)文件進(jìn)行轉(zhuǎn)存，因?yàn)槲募D(zhuǎn)存過程中必然會(huì)涉及到文件名的問題，如果使用原有文件的文件名可能會(huì)存在文件名重復(fù)的問題，因此在原來的基礎(chǔ)上生成一個(gè)新的隨機(jī)文件名，以新的文件名進(jìn)行轉(zhuǎn)存，

2.最后一定要記得返回我們新生成的那個(gè)文件名，因?yàn)閡pload只是將文件上傳到服務(wù)器了，后面還涉及一次將文件在瀏覽器上進(jìn)行回顯的工作，需要使用到這個(gè)文件名

我們給出文件上傳的后端代碼實(shí)現(xiàn)：

文件上傳的后端代碼

我們通過使用@Value注解從配置文件中讀取文件保存路徑：
?

 @Value("${reggie.path}")
    private String path;

reggie:
  path: D:\img\

 @PostMapping("/upload")
    public R<String>upload(MultipartFile file){
        log.info(file.toString());
        //獲取原始文件名，提取JPG
        String originalFilename = file.getOriginalFilename();
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        //生成隨機(jī)文件名
        String random=UUID.randomUUID().toString();
        //獲取新名稱
        String fileName=random+suffix;
        //創(chuàng)建新名稱
        File file1 = new File(path);
        if(!file1.exists()){
            file1.mkdirs();
        }
        //進(jìn)行轉(zhuǎn)存
        try {
            log.info("文件路徑為"+path+fileName);
            file.transferTo(new File(path+fileName));
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return R.success(fileName);
    }

notes:關(guān)于MultipartFile類對(duì)象名：這個(gè)對(duì)象名必須與前端傳來的對(duì)象名保持一致，也就是說是前后端的交互是以對(duì)象名進(jìn)行匹配的，如果對(duì)象名不一致，傳到后端的MultipartFile文件對(duì)象就是一個(gè)空對(duì)象了，具體演示如下：

文件下載

介紹

文件下載，也被稱為download,是指將文件從服務(wù)器傳到本地計(jì)算機(jī)的過程

通過瀏覽器進(jìn)行文件下載，通常有兩種表現(xiàn)形式：

• 以附件形式進(jìn)行下載，彈出保存對(duì)話框，將文件保存到指定的磁盤目錄
• 直接在瀏覽器中打開

通過瀏覽器進(jìn)行文件下載，本質(zhì)上就是服務(wù)端將文件以流的形式協(xié)會(huì)到瀏覽器的過程

前端需求

想要實(shí)現(xiàn)完整圖片回顯的功能，下載之前必須要完成上傳功能，并且要拿到需要回顯文件的文件名，所以前端的需求就是根據(jù)upload響應(yīng)返回的文件名向服務(wù)端發(fā)送新的請(qǐng)求獲取文件信息，以此進(jìn)行照片信息的回顯，代碼實(shí)例和具體的請(qǐng)求url如下

代碼示例：

url展示:我們可以發(fā)現(xiàn)，download的url中包含了具體圖片的文件名

前端代碼

具體的前端代碼如下：

  methods: {
          handleAvatarSuccess (response, file, fileList) {
              this.imageUrl = `/common/download?name=${response.data}`
          },
          beforeUpload (file) {
            if(file){
              const suffix = file.name.split('.')[1]
              const size = file.size / 1024 / 1024 < 2
              if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                this.$message.error('上傳圖片只支持 png、jpeg、jpg 格式！')
                this.$refs.upload.clearFiles()
                return false
              }
              if(!size){
                this.$message.error('上傳文件大小不能超過 2MB!')
                return false
              }
              return file
            }
          }
        }

后端需求

后端接收到前端傳來的文件名，根據(jù)文件路徑和文件名創(chuàng)建FileInputStream對(duì)象，利用response對(duì)象創(chuàng)建ServletOutputStream對(duì)象，從FileInputStream文件中讀取數(shù)據(jù)并通過數(shù)組寫入ServletOutputStream對(duì)象，最后記得一定要關(guān)閉流資源

后端代碼

?后端代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-474430.html

 @GetMapping("/download")
    public void downLoad(String name, HttpServletResponse response){
        //輸入流，通過提供指定位置去讀取數(shù)據(jù)
        try {
            FileInputStream fileInputStream = new FileInputStream(new File(path + name));
            //輸出流，通過讀取到的數(shù)據(jù)輸出到瀏覽器中
            ServletOutputStream outputStream = response.getOutputStream();
            response.setContentType("image/jpeg");
            //將數(shù)據(jù)通過byte字符數(shù)組進(jìn)行讀取
            int len=0;
            byte[]bytes=new byte[1024];
            while((len=fileInputStream.read(bytes))!=-1){
                outputStream.write(bytes,0,len);
                //刷新
                outputStream.flush();
            }
            fileInputStream.close();
            outputStream.close();
        } catch (FileNotFoundException e) {
            throw new RuntimeException(e);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }


    }

到了這里，關(guān)于【springboot項(xiàng)目開發(fā)】文件上傳與下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！