前言：
對element的上傳元件進行二次封裝，讓他可以實現上傳下載功能。
實現效果：
手動上傳，不是自動，選中檔案後可上傳，也可清空選中檔案，單個刪除也是可以的
實現步驟：
1、封裝好的 uploadAndDown.vue原始碼， 引入就好
<template>
<el-upload
v-if="Refresh"
class="upload-demo"
ref="upload"
:action="action"
:headers="headers"
:multiple="multiple"
:data="data"
:name="name"
:with-credentials="cookieOK"
:show-file-list="showFileList"
:drag="drag"
:accept="accept"
:list-type="listType"
:auto-upload="autoUpload"
:file-list="fileList"
:disabled="is_disabled"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:on-progress="handleProgress"
:on-exceed="handleExceed"
:on-change="onChange"
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:http-request="httpRequest"
>
<el-button slot="trigger" type="primary" icon="el-icon-upload2">選取檔案</el-button>
<el-button style="margin-left: 10px;"
type="success"
@click="submitUploadSD"
:disabled="fileList.length==0"
:title="fileList.length==0?'請先選中檔案':''"
icon="el-icon-upload">開始上傳</el-button>
<el-button type="danger"
v-if="fileList.length>0"
icon="el-icon-delete"
@click.stop="clearFiles"
title="清空選中檔案"
circle></el-button>
<el-button style="margin-left: 10px;"
type="primary"
@click.stop="downFile"
icon="el-icon-download">下載模板</el-button>
<!--提示資訊-->
<div slot="tip" class="el-upload__tip" v-if="tip_text!=''">{{tip_text}}</div>
</el-upload>
</template>
<script>
//element的上傳檔案元件
export default {
props:{
/**
* 自動上傳引數
* */
autoUpload:{ // 是否需要選取完自動上傳功能
type: Boolean,
default: false
},
action:{//上傳的地址
type: String,
default: ''
},
headers: {//設定上傳的請求頭部
type:Object,
default: () => {
return {}
}
},
data: {//上傳時額外帶的引數
type:Object,
default: () => {
return {}
}
},
name:{//上傳的檔案欄位名
type: String,
default: 'file'
},
cookieOK:{//支援傳送 cookie 憑證資訊
type: Boolean,
default: true
},
/**
* 公共引數
* */
showFileList:{//是否顯示已上傳檔案列表
type: Boolean,
default: true
},
drag:{//是否啟用拖拽上傳
type: Boolean,
default: false
},
accept:{//接受檔案型別-圖片上傳型別-不同的格式之間以逗號隔開
type: String,
// default:'.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
default: '.xlsx,.xls'
},
listType:{ // 檔案列表的型別 - text/picture/picture-card
type: String,
default: 'text'
},
fileList:{//已上傳的檔案列表,
type:Array,
default: () => {
// { 預設格式
// name: 'food.jpeg',
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
// }
return []
}
},
is_disabled:{//是否禁止，true是禁止，false不禁止
type: Boolean,
default: false
},
multiple:{//是否可以多選
type: Boolean,
default: true
},
limit:{//最大允許上傳個數
type: Number,
default: 30
},
tip_text:{//提示資訊
type: String,
default: ''
},
/**
* 手動上傳引數
* */
needFromUpload:{ // form表單,將上傳的file檔案通過 formUpload 方法傳送出去
type: Boolean,
default: false
},
},
watch: {},
data() {
return {
Refresh:true,//強制重新整理
}
},
created() {
},
mounted() {
},
methods: {
/**
* 上傳-預設事件
* */
//檔案列表移除檔案時的鉤子
handleRemove(file, fileList) {
console.log('當前移除的是'+file);
},
//點選檔案列表中已上傳的檔案時的鉤子
handlePreview(file) {
console.log('當前點選的是'+file);
},
//檔案上傳成功時的鉤子
handleSuccess(response, file, fileList) {
console.log('檔案上傳成功');
},
//檔案上傳失敗時的鉤子
handleError(err, file, fileList) {
console.log('檔案上傳失敗');
},
//檔案上傳時的鉤子
handleProgress(event, file, fileList) {
console.log(file);
},
//檔案超出個數限制時的鉤子
handleExceed(files, fileList) {
console.log('檔案超出個數限制');
},
//覆蓋預設的上傳行為，可以自定義上傳的實現
httpRequest(){
},
//刪除檔案之前的鉤子，引數為上傳的檔案和檔案列表，若返回 false 或者返回 Promise 且被 reject，則停止刪除。
beforeRemove(file, fileList) {
console.log('當前刪除的檔案'+file);
this.fileList.forEach((item,index)=>{
if(item == file){
this.fileList.splice(index,1)
}
})
},
/**
* 檔案狀態改變時的鉤子，新增檔案、上傳成功和上傳失敗時都會被呼叫
*/
onChange(file, fileList) {
this.fileList = fileList;
console.log('當前的選中檔案：');
console.log(fileList);
},
/**
* 上傳檔案之前的鉤子，引數為上傳的檔案，若返回 false 或者返回 Promise 且被 reject，則停止上傳。
*/
beforeUpload(file) {
console.log(file);
},
/**
* 上傳-自定義事件
* */
submitUpload() {
this.$refs.upload.submit();
},
//清空已上傳的檔案列表（該方法不支援在 before-upload 中呼叫）
clearFiles(){
this.$refs.upload.clearFiles();
this.fileList = [];
},
//取消上傳某個檔案
abortFiles(file){
this.$refs.upload.abort(file);
},
/**
* 手動上傳點選確認
* */
submitUploadSD(){
let arr = this.fileList;
let str = {
fileList:arr
}
this.$emit('uploadFile',str);
},
/**
* 下載模板點選
* */
downFile(){
this.$emit('downFile');
},
/**
* 手動重新整理上傳元件
* */
RefreshUpload(){
let arr = this.fileList;
this.Refresh = false;
this.$nextTick(()=>{
this.Refresh = true;
})
},
},
components: {},
beforeDestroy() {
}
}
</script>
<style lang='scss' scoped>
</style>
2、呼叫方法：
template:
<uploadAndDown class="uploadAndDown" @uploadFile="uploadFile" @downFile="downFile"></uploadAndDown>
js部分： 這裡拿到的是一個陣列，不管增、刪，這個陣列都是對應現在選中了幾個檔案
/**
* 上傳
* */
uploadFile(str){
let fileList = str.fileList;
debugger
},
//下載事件
downFile(){
console.log('點選下載按鈕');
},
css部分：
.uploadAndDown{
width: 91%;
padding-right: 1%;
float: right;
}
相關api:
Attribute
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|---|
| action | 必選引數，上傳的地址 | string | — | — |
| headers | 設定上傳的請求頭部 | object | — | — |
| multiple | 是否支援多選檔案 | boolean | — | — |
| data | 上傳時附帶的額外引數 | object | — | — |
| name | 上傳的檔案欄位名 | string | — | file |
| with-credentials | 支援傳送 cookie 憑證資訊 | boolean | — | false |
| show-file-list | 是否顯示已上傳檔案列表 | boolean | — | true |
| drag | 是否啟用拖拽上傳 | boolean | — | false |
| accept | 接受上傳的檔案型別（thumbnail-mode 模式下此引數無效） | 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) | — | — |
| list-type | 檔案列表的型別 | string | text/picture/picture-card | text |
| auto-upload | 是否在選取檔案後立即進行上傳 | boolean | — | true |
| file-list | 上傳的檔案列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
| http-request | 覆蓋預設的上傳行為，可以自定義上傳的實現 | function | — | — |
| disabled | 是否禁用 | boolean | — | false |
| limit | 最大允許上傳個數 | number | — | — |
| on-exceed | 檔案超出個數限制時的鉤子 | function(files, fileList) | — | - |
¶Slot
| name | 說明 |
|---|
| trigger | 觸發檔案選擇框的內容 |
| tip | 提示說明文字 |
¶Methods
| 方法名 | 說明 | 引數 |
|---|
| clearFiles | 清空已上傳的檔案列表（該方法不支援在 before-upload 中呼叫） | — |
| abort | 取消上傳請求 | （ file: fileList 中的 file 物件 ） |
| submit | 手動上傳檔案列表 | — |