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 | 必選參數，上傳的地址 | 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 中調用） | - |
文件上傳
在進行文件上傳時，因為需要的不同，所以可分為 即時上傳，延時上傳 兩種情況
即時上傳：選中文件之后立即上傳
說明：文件上傳時action屬性為文件上傳的地地址，如果上傳文件時需要攜帶參數，可放在data屬性中（對象格式）
<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>
延時上傳：可用於表單操作時傳遞文件，在表單信息保存完畢后上傳文件操作
說明：延時上傳需要依靠auto-upload屬性來設置文件是否即時上傳，默認值為 true,如果設置為false時，選擇文件之后不會上傳文件，我們可在需要上傳文件時調用如下方法即可上傳文件
$ 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函數來進行限制，如此即可真正的限制文件上傳時的格式限制
<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 下載文件的地址
刪除文件
在頁面回顯之后，也會有刪除文件的操作，此時我們可以使用該組件中的 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) => {
// 刪除成功，更新頁面中的文件列表信息
})
}
歡迎大家關注我的微信公眾號，一起學習一起進步
代碼小書生