Vue 微信開發（三，pdf/圖片預覽）

1. 新需求又來了，後臺上傳pdf,手機微信裏要能預覽

當時以爲，這個東西牽扯到文件的東西都不怎麼好作。

<1>後臺上傳pdf

由於後臺系統使用的是elementui，因此直接就使用elementui的上傳組件。感受elementui 的日期插件有點小小的問題，當我綁定好日期格式，在提交的時候獲取的值居然仍是沒有格式化的日期，而後我就看教程上的代碼還有文檔上的api,發現能夠綁定一個change,既然我使用的是vue,數據也是雙向綁定，可是日期框裏面的值要監聽change才能拿到轉換格式之後的值。就感受畫蛇添足。而後就是按照官網的例子，操做完了，而後提交請求接口了，歪日，報錯了，什麼不支持的媒體類型，什麼406，，什麼後臺直接返回不支持類型，我想着我請求頭也設置的是multipart/form-data，而後我和後臺說爲啥報500了啊，你看看是否是大家的問題。人家一口否認了我。當時就在想，請求頭也設置了，還有什麼設置致使會請求失敗麼，想來想去也只有請求的數據格式有問題了，後是File格式的數據才行。

async submitUpload() {
        let formData = new FormData();
        if (this.fileList.length < 1) {
          this.$message.error("請上傳pdf文件")
        } else {
          formData.append("file", this.fileList[0].raw);
          let res = await savehealthRecord(formData);
          console.log("res", res);
          if (res.flag) {
            this.$message.success("上傳成功!");
            this.originName = res.originName;
            this.accessUrl = res.accessUrl;
            this.fileList = [];
          }
        }
      }
複製代碼

<2>前端預覽（手機微信預覽）

由於咱們使用了阿里的oss,因此在上傳的時候會返給我地址，我提交的時候又把地址存在咱們本身的數據庫，微信請求的是這個存儲地址。因此一開始咱們直接window.location="url",這樣作會提示跳轉到手機的瀏覽器，而不是在微信中打開，因此就感受體驗不是很好。但願能在微信中直接開一個頁面瀏覽這些文件內容。 因此參考的 github.com/Lushenggang… 這個哥們的內容。可是稍微的變了一下，他是寫了一個組件，把url使用父子傳值到pdf渲染頁面，由於我想使用路由的方式，因此直接放在Vuex裏面，而後使用getter反出來在組件中使用。getter的使用是經過計算屬性獲取。可是我當時沒有在vuex把數據本地化，致使刷新頁面之後，數據丟失，頁面渲染失敗。因此把這個url稍微存儲幾分鐘，防止用戶刷新渲染失敗。

<3> 圖片上傳預覽

圖片上傳的是使用vant的van-uploader組件，不過樣式是全新定義，可是這個沒有圖片預覽功能。因此使用了vue-preview，可是這玩意使用徹底不是網上說的那樣了，如今徹底是一個vue組件的形式來使用的了。

3. 到這裏此次開發就算完成了，微信端和pc端，感受本身須要學習的東西還不少