Ant Design Vue 中upload遇到的坑-2

　　這次也是在使用upload時遇到的問題。 需求是上傳后可以直接下載文件。
　　而項目中是使用oss做上傳和存儲的，為了保護資源，並做了refer校驗。也就是說，上傳后的資源只能在當前域名下下載有效，一旦打開新頁面就會被拒絕訪問和下載。

　　原有的方式　　　

 <a-upload 
                      :file-list="defaultFileList"
                      :before-upload="beforeUpLoad"
                      :showUploadList="{
                        showRemoveIcon: false
                      }"
                      :customRequest="newFileAdd">
            </a-upload>

 

　　這里發現了問題，在上傳文件后，每次直接點擊列表的文件都會跳轉新頁面，對文件路徑進行訪問。 這樣直接就被oss驗證給拒絕了。 

　　一開始，一直在糾結需不需要重新創建一個可以公共訪問的上傳路徑，這樣可以直接訪問上傳的文件。 但是這樣並不符合項目需求。所以重新找其他的方法。既然默認跳轉新頁面訪問受限，那就在當前頁面進行下載就可以。

　　這時候發現，ant design vue 其實提供了一個下載事件，也就是說自定義一個下載方法就可以了。  

　　這里需要注意的是ant design vue的版本，最好用最新版本。 

　　首先綁定事件配合下載按鈕一起使用

　　

 <a-upload 
                      :file-list="defaultFileList"
                      :before-upload="beforeUpLoad"
                      :showUploadList="{
                        showRemoveIcon: false，

　　　　　　　　　　　　　　　　showDownloadIcon: true

                      }"
                      :customRequest="newFileAdd"
                       @download="downloadFile">
            </a-upload>                

　　但是這個時候出現一個問題，就是上傳列表並不現實下載按鈕。 原因是在對fileList中的對象賦值的時候，沒有把status設置為done，如果是在uploading的狀態下是不會現實下載按鈕的。

　　修改后的代碼

　　

this.defaultFileList.push(
          {
            uid: '1',
            status: 'done',
            name: "xxx",
            url: fileUrl
          }
        )

　　這樣就可以了。 不還有一個小問題，就是在上傳后的列表中，點擊下載按鈕可以下載，點擊文件名稱也可以下載。 看了一下上傳文件后的dom結構，默認將列表的文件放在一個a標簽中顯示出來，而a標簽的url就是剛才代碼中復制的那個url，所有這個做了一個小改動，就是將filelList中對象的url屬性注釋掉，不適用默認的url，使用其他的自定義屬性保存文件上傳后的url。然后在在下載文件的時候使用自己的url屬性就可以了。

　　

this.defaultFileList.push(
          {
            uid: '1',
            status: 'done',
            name: "xxx",
            //url: fileUrl
            downloadUrl:fileUrl  //下載的時候直接用這個屬性
          }
        )