【寫在前面】其實(shí)這篇文章我早就想寫了，只是一直被需求開發(fā)耽擱，這不晚上剛好下班后有點(diǎn)時(shí)間，記錄一下。需求是excel表格的上傳，這個(gè)是很多業(yè)務(wù)系統(tǒng)不可或缺的功能點(diǎn)，再此也希望您能夠讀完我這篇文章對(duì)文件上傳不再困惑。（文件下載見另外一篇）
涉及知識(shí)點(diǎn)：java實(shí)現(xiàn)文件上傳，vue實(shí)現(xiàn)文件上傳，swagger測(cè)試。

一、思路整理

首先我們?cè)趯懸粋€(gè)項(xiàng)目或一個(gè)功能的時(shí)候，腦海里就應(yīng)該去勾勒一下實(shí)現(xiàn)過程，我大致歸納為以下幾點(diǎn)：
1、上傳環(huán)境的準(zhǔn)備，也就是文件上傳到哪（本地或服務(wù)器或虛機(jī)）
2、上傳代碼的開發(fā)，前后端頁面的準(zhǔn)備（依賴組件下載）
3、自主測(cè)試，看效果

二、實(shí)現(xiàn)效果

文件的上傳效果

三、實(shí)現(xiàn)過程（前后端源碼）

1、上傳路徑設(shè)置

鑒于很多人沒有服務(wù)器或虛機(jī)，我就用本地作為示例，首先我們先創(chuàng)建一個(gè)maven項(xiàng)目工程，眾所周知，java運(yùn)行后都是編譯成class文件，所以我們將上傳的路徑設(shè)置在classes下的template里。
獲取存放文件路徑的方式：

String filePath =this.getClass().getResource("/template/").getPath();

2、java接口實(shí)現(xiàn)源碼（核心）

具體java實(shí)現(xiàn)代碼如下（其中所需要的插件需要自己引入）：

@Override
    public void uploadTemplate(MultipartFile file) throws Exception {
        boolean b=upload(file);
    }
    public boolean upload(MultipartFile file) throws Exception {
        boolean b = false;
        String filePath =this.getClass().getResource("/template/").getPath();
        String fileName = file.getOriginalFilename();
        try {
            UploadState state = null;
            File oldFile = new File(filePath+fileName);
            if (oldFile.exists()) {
                oldFile.delete();
            }
            state = UploadFileUtils.upload4Stream(fileName, filePath, file.getInputStream());
            if (state.getFlag() == UploadState.UPLOAD_SUCCSSS.getFlag()) {
                b = true;
            } else {
                b = false;
            }
        } catch (IOException e) {
            logger.error(e.getMessage(), e);
            throw e;
        } catch (Exception e) {
            logger.error(e.getMessage(), e);
            throw e;
        }
        return b;
}

此處需要前端注意的是需要傳binary形式的入?yún)?，也就是接口調(diào)用時(shí)前端的請(qǐng)求參數(shù)為：

不然后端也不能處理。

3、前端實(shí)現(xiàn)源碼（基于vue）

3.1 創(chuàng)建input標(biāo)簽

首先我們創(chuàng)建一個(gè)input 標(biāo)簽（type為file），用于選擇上傳文件的臨時(shí)節(jié)點(diǎn)，如下所示：

<input
     type="file"
     class="upload_file"
     @change="upload_files($event)"
     accept=".pdf, .doc, .docx, .xls, .xlsx"
/>

設(shè)置input的change事件觸發(fā)上傳函數(shù)，另外設(shè)置其所接受的上傳文件的類型，我暫時(shí)針對(duì)pdf,word.excel文檔類型做了設(shè)置。

3.2 方法函數(shù)

在vue的methods里面設(shè)置upload_files方法

methods: {
    upload_files: function (e) {
      const file = e.target.files[0];
      console.log(file);
      uploadFiles(file);
    },
  },

針對(duì)uploadFiles方法體我是專門放在js文件里的，然后再調(diào)用axios里的公用方法。

export const uploadFiles = (params) => { return requpload("post", portHead + "/Updown/uploadTemplate", params) };

3.3 axios請(qǐng)求配置（核心）

我是直接用post請(qǐng)求的方式，如下所示：

const requpload = (method, url, file) => {
    let params = new FormData();
    params.append("file", file);
    axios.post(url, params).then((response) => {
        console.log('上傳文件了響應(yīng)')
        console.log(response)
        Toast.success('上傳成功');
        // this.$message.success('成功')
    }).catch(function (err) {
        console.log('上傳文件了失敗')
        console.log(err) //捕獲異常

        Toast.fail('上傳失敗');
        // this.$message.error('失敗')
    })
};

4、功能測(cè)試（swagger和debugger）

當(dāng)前后端都搭建好了，然后啟動(dòng)前后端程序，在前端頁面上點(diǎn)擊上傳按鈕，然后看請(qǐng)求是否200，且文件是否上傳到classes的template下。如果失敗了，切記先看后端接口是否通的，用postman或是swagger(最好用swagger3測(cè)試，因?yàn)?版本有中文亂碼問題)，如果后端通的，就需要通過debugger模式來定位前端的傳參的問題，切記是binary形式。

最終效果如下所示：

四、彩蛋上皇榜

如有不太清楚的可以留言哈，一起探討一起進(jìn)步，期待您的反饋。

如果覺得這篇文章對(duì)您有幫助的話，想支持博主的可以上皇榜看看喲，皇榜點(diǎn)擊此處進(jìn)入文章來源地址http://www.zghlxwxcb.cn/news/detail-456560.html

到了這里，關(guān)于【Java實(shí)現(xiàn)文件上傳】java后端+vue前端實(shí)現(xiàn)文件上傳全過程詳解（附源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！