日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

1.傳統(tǒng)方案

我們先來(lái)看看，基于 session 認(rèn)證，文件上傳要怎么做。

在 Vue.js 中，如果網(wǎng)絡(luò)請(qǐng)求使用 axios ，并且使用了 ElementUI 庫(kù)，那么一般來(lái)說(shuō)，文件上傳有兩種不同的實(shí)現(xiàn)方案：

• 通過(guò) Ajax 實(shí)現(xiàn)文件上傳
• 通過(guò) ElementUI 里邊的 Upload 組件實(shí)現(xiàn)文件上傳

兩種方案，各有優(yōu)缺點(diǎn)，我們分別來(lái)看。

1.1 準(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)行歸類(lèi)，使用 UUID 給文件重命名。

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

1.2 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)于這段上傳核心邏輯，解釋如下：

• 首先利用 Vue 中的 $refs 查找到存放文件的元素。
• type 為 file 的 input 元素內(nèi)部有一個(gè) files 數(shù)組，里邊存放了所有選擇的 file，由于文件上傳時(shí)，文件可以多選，因此這里拿到的 files 對(duì)象是一個(gè)數(shù)組。
• 從 files 對(duì)象中，獲取自己要上傳的文件，由于這里是單選，所以其實(shí)就是數(shù)組中的第一項(xiàng)。
• 構(gòu)造一個(gè) FormData ，用來(lái)存放上傳的數(shù)據(jù),FormData 不可以像 Java 中的 StringBuffer 使用鏈?zhǔn)脚渲谩?/li>
• 構(gòu)造好 FromData 后，就可以直接上傳數(shù)據(jù)了，F(xiàn)ormData 就是要上傳的數(shù)據(jù)。
• 文件上傳注意兩點(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)行文件上傳了。

1.3 使用 el-upload 組件

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

  style="display: inline"
  :show-file-list="false"
  :on-success="onSuccess"
  :on-error="onError"
  :before-upload="beforeUpload"
  action="/system/basic/jl/import">
  {{btnText}}

• show-file-list 表示是否展示上傳文件列表，默認(rèn)為true，這里設(shè)置為不展示。
• before-upload 表示上傳之前的回調(diào)，可以在該方法中，做一些準(zhǔn)備工作，例如展示一個(gè)進(jìn)度條給用戶(hù) 。
• on-success 和 on-error 分別表示上傳成功和失敗時(shí)候的回調(diào)，可以在這兩個(gè)方法中，給用戶(hù)一個(gè)相應(yīng)的提示，如果有進(jìn)度條，還需要在這兩個(gè)方法中關(guān)閉進(jìn)度條。
• action 指文件上傳地址。
• 上傳按鈕的點(diǎn)擊狀態(tài)和圖標(biāo)都設(shè)置為變量 ，在文件上傳過(guò)程中，修改上傳按鈕的點(diǎn)擊狀態(tài)為不可點(diǎn)擊，同時(shí)修改圖標(biāo)為一個(gè)正在加載的圖標(biāo) loading。
• 上傳的文本也設(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)入';
}

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

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

上傳效果圖如下：

使用 el-upload 做文件上傳，松哥之前也錄過(guò)一個(gè)視頻，小伙伴們可以參考(本視頻節(jié)選自松哥自制的 Spring Boot+Vue+微人事系列視頻教程)：

1.4 兩種方式比較

兩種上傳方式各有優(yōu)缺點(diǎn)：

• 第一種方式最大的優(yōu)勢(shì)是通用，一招鮮吃遍天，到哪里都能用，但是對(duì)于上傳過(guò)程的監(jiān)控，進(jìn)度條的展示等等邏輯都需要自己來(lái)實(shí)現(xiàn)。
• 第二種方式不夠通用，因?yàn)樗?ElementUI 中的組件，得引入 ElementUI 才能使用，不過(guò)這種方式很明顯有需多比較方便的回調(diào)，可以實(shí)現(xiàn)非常方便的處理常見(jiàn)的各種上傳問(wèn)題。
• 常規(guī)的上傳需求第二種方式可以滿(mǎn)足，但是如果要對(duì)上傳的方法進(jìn)行定制，則還是建議使用第一種上傳方案。

2.手動(dòng)傳遞令牌

對(duì)于上面不同的文件上傳方式，手動(dòng)上傳令牌也有不同的方案，松哥來(lái)和大家挨個(gè)介紹。我這里服務(wù)端認(rèn)證是 OAuth2+JWT 的方式，所以接下來(lái)令牌傳遞主要是按照 OAuth2 的格式來(lái)傳遞令牌，其實(shí)都是修改請(qǐng)求頭，只要這種方式會(huì)了，其他方式也就會(huì)了。

關(guān)于 OAuth2，如果小伙伴們還不熟悉，可以看看松哥之前寫(xiě)的系列教程：OAuth2系列

2.1 Ajax 傳遞令牌

Ajax 傳遞令牌實(shí)際上是非常容易的，我們只需要稍微修改請(qǐng)求頭即可。我給大家舉一個(gè)簡(jiǎn)單例子。

如果你用的 axios 來(lái)做網(wǎng)絡(luò)請(qǐng)求，那么按照如下方式添加請(qǐng)求頭即可(或者在請(qǐng)求攔截器中統(tǒng)一添加)：

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

如果你用了 jQuery 的話(huà)，那么按照如下方式添加請(qǐng)求頭即可：

$("#btnClick").click(function () {
        var formData = new FormData();
        formData.append("file", $("#userface")[0].files[0]);
        $.ajax({
            url: '/fileupload',
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token
            },
            data: formData,
            processData: false,
            contentType: false,
            success: function (msg) {
                alert(msg);
            }
        });
    });

無(wú)非就是修改請(qǐng)求頭，只要是自己發(fā)送請(qǐng)求的，請(qǐng)求頭都是可以自由定制的，無(wú)論你用 jQuery 還是 axios 還是原生的 XMLHttpRequest。

2.2 el-upload 處理令牌

如果使用了 el-upload，我們就得在人家框架里邊玩了，得符合框架要求，這雖然多了一些掣肘，但是也不是不能實(shí)現(xiàn)，松哥這里和大家介紹兩種方案。

2.2.1 方案一

方案一是我目前采用的方案，因?yàn)?el-upload 支持定制請(qǐng)求頭，這就好辦了：

  ref="upload"
  class="upload-container"
  :data="category"
  :multiple="false"
  :limit="1"
  :headers="myHeaders"
  :auto-upload="false"
  :on-success="onSuccess"
  :on-error="onError"
  :file-list="fileList"
  action="/appmanager/app/categories/"
>
  選擇圖標(biāo)

選擇圖標(biāo)

其中，:headers="myHeaders" 就是我定制的請(qǐng)求頭，然后在 data 中定義該變量即可：

data() {
  return {
    myHeaders: { Authorization: 'Bearer ' + getToken() }
  }
},

2.2.2 方案二

方案二則是利用 el-upload 的 before-upload 鉤子函數(shù)，開(kāi)發(fā)者可以在這個(gè)鉤子函數(shù)中自己手動(dòng)上傳，上傳完成之后，返回一個(gè) false，這時(shí) el-upload 就會(huì)停止它自己的上傳邏輯。這種方式我看到有別的小伙伴在用，所以給大家一個(gè)簡(jiǎn)單的案例參考下：

beforeUpload (file) {
    //參考上面的 ajax 或者 axios 上傳文件
    return false
}

這里有幾個(gè)細(xì)節(jié)大家需要注意下：

• el-upload 的 action 屬性隨意給一個(gè)值，使之不報(bào)錯(cuò)，因?yàn)檎嬲纳蟼鞯刂肺覀儗⒃?beforeUpload 方法中給出。
• beforeUpload 方法的上傳邏輯跟我們第一小節(jié)介紹的一致，我就不重復(fù)寫(xiě)了，注意上傳的文件對(duì)象是 file.raw。
• beforeUpload 方法最終返回 false，終止 el-upload 自己的上傳邏輯。

3.小結(jié)

好了，和小伙伴們介紹了幾種文件上傳時(shí)候的令牌傳遞方式，不知道大家有沒(méi)有 GET 到呢?

當(dāng)前名稱(chēng)：SpringBoot+Vue文件上傳，如何攜帶令牌信息？
當(dāng)前路徑：http://www.5511xx.com/article/dpsioso.html