1. 程式人生 > >Vue實現檔案上傳和檔案下載

Vue實現檔案上傳和檔案下載

檔案下載:
檔案下載通常有幾種方法
1.通過url下載
2.location.href
3.form提交直接下載
4.HTML5 a.download結合blob物件進行下載
第一種方式:
第一種方法是前後端的介面只給了一個API請求:
前端第一個實現是使用a標籤,

第二種方式:
這個方法是直接把 DataURLs 或者 BlogURLs 傳到瀏覽器地址中觸發下載。有兩種方式:

window.location.href = urls; // 本視窗開啟下載
window.open(urls, '_blank'); // 新開視窗下載
      this.content
= content this.filename = filename const blob = new Blob([this.content]) if (window.navigator.msSaveOrOpenBlob) { // 相容IE10 navigator.msSaveBlob(blob, this.filename) } else { // chrome/firefox let aTag = document.createElement('a') aTag.download
= this.filename aTag.href = URL.createObjectURL(blob) aTag.click() URL.revokeObjectURL(aTag.href) }

第四種form表單
不需要我們處理返回二進位制流直接下載,非常方便
form的action設定為介面地址,method設定為post,Post到後臺的資料設定為input的屬性 name = key,value = value的形式,如果有多個key、value的值要傳遞,那麼就設定多個input來分別儲存單個的key、value;
如果請求的介面可以不需要引數,那麼input還是必須要一個,如果不要得話 會引起介面報錯
原理:form的action相當於一個瀏覽器本頁籤/頁面的一個請求,不會被後臺,前臺的路由攔截。所以能夠提交成功。

注意點:如果設定method為get,在action中的uri添加了引數的話,想用這個引數替代input的key、value形式來提交到後臺,這引數是沒有效果的,後臺拿不到這些引數,真正的引數還是以input的name、value的形式儲存,在submit方法執行後傳遞到後臺。
這樣我們就是實現了檔案下載,但是表單提交的資料一般是簡單的鍵值對,如果傳參比較複雜可以考慮將表單序列化提交。

因為專案是基於vue的,而且提交的請求引數涉及很多引數,比較複雜,所以採用了方法三來實現

      axios.post('/rest/inventory/oh_status/info/excel', {
        site: this.selectedsite,
        bu: this.selectedbu,
        ohHealthStatus: this.selectedtitle,
        ohHealthRootcause: this.selectedblock,
        search: this.search,
        sort: this.sort
      }, {responseType: 'arraybuffer'}).then(this.ExportFile).catch(function (error) {
        console.log(error)
      })

     this.content = content
      this.filename = filename
      const blob = new Blob([this.content])
      if (window.navigator.msSaveOrOpenBlob) {
        // 相容IE10
        navigator.msSaveBlob(blob, this.filename)
      } else {
        //  chrome/firefox
        let aTag = document.createElement('a')
        aTag.download = this.filename
        aTag.href = URL.createObjectURL(blob)
        aTag.click()
        URL.revokeObjectURL(aTag.href)
      }

注意我們傳送請求的時候一定要寫上responseType,{responseType: 'arraybuffer'} 否則下載下來的檔案打不開!!!

檔案上傳
檔案上傳通常使用form表單,但是有時候我們不想要用表單,ES6的fromData來實現

    handleGetFile (data) {
      this.file = data
      let formdata = new FormData()
      formdata.append('file', this.file)
      formdata.append('submit', false)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios.post('/rest/master_data/ct2r/odin_delivery_metrics/cvc/file_upload_review', formdata, config).then(this.sendFileSucc)
    },

首先 我們獲取完檔案之後,建立FormData物件,配置頭部,傳送該請求就OK了,別忘了讓後臺將接收頭部請求改為formdata的格式