vue+element 文件操作

作者：一粒塵土  時間：2019-3-17  註：以下操作針對 vue-cli

目錄

• 使用
• 組件常用參數
• 組件常用方法
• 上傳文件
• 上傳文件格式限制
• 回顯文件
• 下載文件
• 刪除文件

使用

• 使用npm安裝Element-ui 依賴
  $ npm i element-ui -S
• 配置vue中的 main.js 文件中添加如下代碼
  import ElementUI from 'element-ui' // 引入element import 'element-ui/lib/theme-chalk/index.css' // 引入css樣式 Vue.use(ElementUI) // 中間件全局註冊

組件常用參數

組件常用方法

文件上傳

在進行文件上傳時，因為需要的不同，所以可分為 即時上傳，延時上傳 兩種情況

即時上傳：選中文件之後立即上傳

說明：文件上傳時action屬性為文件上傳的地地址，如果上傳文件時需要攜帶參數，可放在data屬性中（對象格式）

<el-upload
  class="upload-demo"
  ref="upload"
  action="/jgxf/System/fileUpload.mvc" // 上傳文件的地址
  :on-change="getFiles" // 文件改變時調用的鉤子函數
  multiple // 是否支持上傳多條文件
  :data="addFilesDate" // 上傳文件時攜帶的參數
  :file-list="fileList"> // 上文文件的列表
  <el-button size="small" type="primary">選擇文件</el-button>
</el-upload>

延時上傳：可用於表單操作時傳遞文件，在表單信息保存完畢後上傳文件操作

說明：延時上傳需要依靠auto-upload屬性來設置文件是否即時上傳，預設值為 true,如果設置為false時，選擇文件之後不會上傳文件，我們可在需要上傳文件時調用如下方法即可上傳文件

$ this.$refs.upload.submit() // 上傳文件操作

<el-upload
  class="upload-demo"
  ref="upload"
  action="/jgxf/System/fileUpload.mvc"
  :on-change="getFiles"
  multiple
  :data="addFilesDate"
  :file-list="fileList"
  :auto-upload="false"">
  <el-button size="small" type="primary">選擇文件</el-button>
</el-upload>

上傳文件格式限制

在上傳文件附件的時候，因為需求不同，所以對於文件格式的限制也有所不同，在這裡可以使用accept(接收文件類型)，但是僅僅使用該屬性並不能完全限制用戶的選擇，此時我們可以結合 before-upload函數來進行限制，如此即可真正的限制文件上傳時的格式限制

<el-upload
  class="upload-demo"
  ref="upload"
  action="/jgxf/System/fileUpload.mvc"
  :on-change="getFiles"
  :before-upload="beforeUpload" // 文件上傳前的回調
  multiple
  :accept=".doc, .docx, .xls, .xlsx" // 接收的文件類型
  :data="addFilesDate"
  :file-list="fileList">
  <el-button size="small" type="primary">選擇文件</el-button>

添加：我在這裡寫了個方法，可以在before-upload函數中調用 this.fileUploadSuffix(fileList, suffix)，來判斷用戶選擇的問價是否是符合尾碼的，代碼如下

/**
 * 文件上傳 限制格式
 * @param fileList 文件列表（ 數組）
 * @param suffix 文件格式限制（字元串）".doc, .docx, .wps"
 * @param blooean 返回值
 */
Vue.prototype.fileUploadSuffix = function (fileList, suffix) {
  let blooean = null
  for (let i in fileList) {
    let item = fileList[i] // 某一條文件信息
    let fileName = item.name.lastIndexOf('.') // 取到文件名開始到最後一個點的長度
    let fileNameLength = item.name.length // 取到文件名長度
    let hz = item.name.substring(fileName + 1, fileNameLength) // 獲取上傳文件的尾碼名
    // 判斷文件名尾碼是否合法
    if (suffix.indexOf(hz) === -1) { // 不合法上傳文件
      // 刪除上傳的文件列表中的不合法文件類型
      fileList.splice(i--, 1) // 刪除列表中的數據（刪除後文件調整）
      // 彈窗顯示判斷
      blooean = true
    }
  }
  return blooean // 返回參數
}

回顯文件

根據element文檔可知，儲存文件上傳的屬性為 fileList ，我們只需將接受的參數，按照fileList的name屬性附上值，即可回顯我們需要的格式，當然我們也可以添加替他屬性，用來進行下載刪除等操作

下載文件

在element的 upload 組件中有一個屬性可讓我們用來進行文件的下載 on-preview(點擊文件列表中已上傳的文件時的鉤子)，然後在該函數中調用window.open(url) 方法 url 下載文件的地址

刪除文件

在頁面回顯之後，也會有刪除文件的操作，此時我們可以使用該組件中的 on-remove(文件列表移除文件的操作)屬性 ，再調用該參數的時候文件列表中的數據將會被刪除，這種效果並不是很好，由此我們可以使用 before-remove 來進行刪除文件的操作，如果用戶選擇確定刪除時，我們再去調用刪除文件的介面，在刪除成功之後，我們在進行頁面上列表的屋裡刪除，就好了

<!--html代碼-->
<el-upload
  :befor-remove="beforRemove"
  ></el-upload>

<!--js代碼-->
beforeRemove (file, fileList) {
  this.$alert(`確定移除該文件？`, '提示', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    this.deleteFile(file, fileList)
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '取消刪除操作'
    })
  })
  return false
},
deleteFile (file, fileList) {
  let file = file
  let fileList = fileList // 接收文件
  this.post(() => {
    url: '', // 刪除文件的介面
    data: {} // 傳遞的參數
  }, (res) => {
    // 刪除成功，更新頁面中的文件列表信息
  })
}