element中文件上傳

時間 2019-12-01

標籤 element 文件上傳简体版

原文原文鏈接

vue+element 文件操做

做者：一粒塵土  時間：2019-3-17  注：如下操做針對 vue-cli

參數	說明	類型	可選值	默認值
action	必選參數，上傳的地址	string	-	-
multiple	是否支持多選文件	boolean	-	-
data	上傳時附帶的額外參數	object	-	-
accept	接受上傳的文件類型	string	-	-
on-preview	點擊文件列表中已上傳的文件時的鉤子	function(file)	-	-
on-remove	文件列表移除文件時的鉤子	function(file, fileList)	-	-
on-success	文件上傳成功時的鉤子	function(response, file, fileList)	-	-
on-error	文件上傳失敗時的鉤子	function(err, file, fileList)	-	-
on-progress	文件上傳時的鉤子	function(event, file, fileList)	-	-
on-change	文件狀態改變時的鉤子，添加文件、上傳成功和上傳失敗時都會被調用	function(file, fileList)	-	-
before-upload	上傳文件以前的鉤子，參數爲上傳的文件，若返回 false 或者返回 Promise 且被 reject，則中止上傳	function(file)	-	-
before-remove	刪除文件以前的鉤子，參數爲上傳的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，則中止上傳	function(file, fileList)	-	-
auto-upload	是否在選取文件後當即進行上傳	boolean	-	true
file-list	上傳的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	-	[]
limit	最大容許上傳個數	number	-	-

組件經常使用方法

參數	說明	參數
clearFiles	清空已上傳的文件列表（該方法不支持在 before-upload 中調用）	-

文件上傳

在進行文件上傳時，由於須要的不一樣，因此可分爲 即時上傳，延時上傳 兩種狀況css

即時上傳：選中文件以後當即上傳html

說明：文件上傳時action屬性爲文件上傳的地地址，若是上傳文件時須要攜帶參數，可放在data屬性中（對象格式）vue

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

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

說明：延時上傳須要依靠auto-upload屬性來設置文件是否即時上傳，默認值爲 true,若是設置爲false時，選擇文件以後不會上傳文件，咱們可在須要上傳文件時調用以下方法便可上傳文件npm

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

<el-upload
  class="upload-demo"
  ref="upload"
  action="/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函數來進行限制，如此便可真正的限制文件上傳時的格式限制element-ui

<el-upload
  class="upload-demo"
  ref="upload"
  action="/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屬性附上值，便可回顯咱們須要的格式，固然咱們也能夠添加替他屬性，用來進行下載刪除等操做微信

屬性值	參數
name	文件名稱
url	文件上傳的路徑

下載文件

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

刪除文件

在頁面回顯以後，也會有刪除文件的操做，此時咱們可使用該組件中的 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) => {
    // 刪除成功，更新頁面中的文件列表信息
  })
}