Spring Boot和Vue前后端分離項(xiàng)目中怎么實(shí)現(xiàn)文件上傳，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到納溪網(wǎng)站設(shè)計(jì)與納溪網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋納溪地區(qū)。

準(zhǔn)備工作

首先我們需要一點(diǎn)點(diǎn)準(zhǔn)備工作，就是在后端提供一個(gè)文件上傳接口，這是一個(gè)普通的 Spring Boot 項(xiàng)目，如下：

SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");  @PostMapping("/import")  public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {      String format = sdf.format(new Date());      String realPath = req.getServletContext().getRealPath("/upload") + format;      File folder = new File(realPath);      if (!folder.exists()) {          folder.mkdirs();      }      String oldName = file.getOriginalFilename();      String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));      file.transferTo(new File(folder,newName));      String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/upload" + format + newName;      System.out.println(url);      return RespBean.ok("上傳成功!");  }

這里的文件上傳比較簡(jiǎn)單，上傳的文件按照日期進(jìn)行歸類，使用 UUID 給文件重命名。

這里為了簡(jiǎn)化代碼，我省略掉了異常捕獲，上傳結(jié)果直接返回成功，后端代碼大伙可根據(jù)自己的實(shí)際情況自行修改。

Ajax 上傳

在 Vue 中，通過(guò) Ajax 實(shí)現(xiàn)文件上傳，方案和傳統(tǒng) Ajax 實(shí)現(xiàn)文件上傳基本上是一致的，唯一不同的是查找元素的方式。

  導(dǎo)入數(shù)據(jù)

在這里，首先提供一個(gè)文件導(dǎo)入 input 組件，再來(lái)一個(gè)導(dǎo)入按鈕，在導(dǎo)入按鈕的事件中來(lái)完成導(dǎo)入的邏輯。

importData() {    let myfile = this.$refs.myfile;    let files = myfile.files;    let file = files[0];    var formData = new FormData();    formData.append("file", file);    this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{      if (resp) {        console.log(resp);      }    })  }

關(guān)于這段上傳核心邏輯，解釋如下：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  首先利用 Vue 中的 $refs 查找到存放文件的元素。

3.  type 為 file 的 input 元素內(nèi)部有一個(gè) files 數(shù)組，里邊存放了所有選擇的 file，由于文件上傳時(shí)，文件可以多選，因此這里拿到的 files 對(duì)象是一個(gè)數(shù)組。

4.  從 files 對(duì)象中，獲取自己要上傳的文件，由于這里是單選，所以其實(shí)就是數(shù)組中的第一項(xiàng)。

5.  構(gòu)造一個(gè) FormData ，用來(lái)存放上傳的數(shù)據(jù),FormData 不可以像 Java 中的 StringBuffer 使用鏈?zhǔn)脚渲谩?/p>

6.  構(gòu)造好 FromData 后，就可以直接上傳數(shù)據(jù)了，F(xiàn)ormData 就是要上傳的數(shù)據(jù)。

7.  文件上傳注意兩點(diǎn)，1. 請(qǐng)求方法為 post，2. 設(shè)置 Content-Type 為  multipart/form-data 。

這種文件上傳方式，實(shí)際上就是傳統(tǒng)的 Ajax 上傳文件，和大家常見(jiàn)的 jQuery 中寫(xiě)法不同的是，這里元素查找的方式不一樣（實(shí)際上元素查找也可以按照J(rèn)avaScript 中原本的寫(xiě)法來(lái)實(shí)現(xiàn)），其他寫(xiě)法一模一樣。這種方式是一個(gè)通用的方式，和使用哪一種前端框架無(wú)關(guān)。最后再和大家來(lái)看下封裝的上傳方法：

export const uploadFileRequest = (url, params) => {    return axios({      method: 'post',      url: `${base}${url}`,      data: params,      headers: {        'Content-Type': 'multipart/form-data'      }   });  }

經(jīng)過(guò)這幾步的配置后，前端就算上傳完成了，可以進(jìn)行文件上傳了。

使用 Upload 組件

如果使用 Upload ，則需要引入 ElementUI，所以一般建議，如果使用了 ElementUI 做 UI 控件的話，則可以考慮使用 Upload 組件來(lái)實(shí)現(xiàn)文件上傳，如果沒(méi)有使用 ElementUI 的話，則不建議使用 Upload 組件，至于其他的 UI 控件，各自都有自己的文件上傳組件，具體使用可以參考各自文檔。

    {{btnText}}  

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  show-file-list 表示是否展示上傳文件列表，默認(rèn)為true，這里設(shè)置為不展示。

3.  before-upload 表示上傳之前的回調(diào)，可以在該方法中，做一些準(zhǔn)備工作，例如展示一個(gè)進(jìn)度條給用戶 。

4.  on-success 和 on-error 分別表示上傳成功和失敗時(shí)候的回調(diào)，可以在這兩個(gè)方法中，給用戶一個(gè)相應(yīng)的提示，如果有進(jìn)度條，還需要在這兩個(gè)方法中關(guān)閉進(jìn)度條。

5.  action 指文件上傳地址。

6.  上傳按鈕的點(diǎn)擊狀態(tài)和圖標(biāo)都設(shè)置為變量 ，在文件上傳過(guò)程中，修改上傳按鈕的點(diǎn)擊狀態(tài)為不可點(diǎn)擊，同時(shí)修改圖標(biāo)為一個(gè)正在加載的圖標(biāo) loading。

7.  上傳的文本也設(shè)為變量，默認(rèn)上傳 button 的文本是 數(shù)據(jù)導(dǎo)入 ，當(dāng)開(kāi)始上傳后，將找個(gè) button 上的文本修改為 正在導(dǎo)入。

相應(yīng)的回調(diào)如下：

onSuccess(response, file, fileList) {    this.enabledUploadBtn = true;    this.uploadBtnIcon = 'el-icon-upload2';    this.btnText = '數(shù)據(jù)導(dǎo)入';  },  onError(err, file, fileList) {    this.enabledUploadBtn = true;    this.uploadBtnIcon = 'el-icon-upload2';    this.btnText = '數(shù)據(jù)導(dǎo)入';  },  beforeUpload(file) {    this.enabledUploadBtn = false;    this.uploadBtnIcon = 'el-icon-loading';    this.btnText = '正在導(dǎo)入';  }

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  在文件開(kāi)始上傳時(shí)，修改上傳按鈕為不可點(diǎn)擊，同時(shí)修改上傳按鈕的圖標(biāo)和文本。

3.  文件上傳成功或者失敗時(shí)，修改上傳按鈕的狀態(tài)為可以點(diǎn)擊，同時(shí)恢復(fù)上傳按鈕的圖標(biāo)和文本。

上傳效果圖如下：

關(guān)于Spring Boot和Vue前后端分離項(xiàng)目中怎么實(shí)現(xiàn)文件上傳問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。