示範
代碼
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6">
<el-card header="選取檔案自動上傳" class="upload-card-box">
<el-upload
v-loading="uploadLoading"
ref="upload"
multiple
action="#"
:limit="uploadConfig.limit"
:file-list="fileList"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:http-request="autoUpload"
:auto-upload="true"
>
<el-button size="small" type="primary">選取檔案自動上傳</el-button>
<div slot="tip" class="el-upload__tip">
隻能上傳 {{ fileType }} 檔案，且不超過{{ uploadConfig.size }}M
</div>
</el-upload>
</el-card>
</el-col>
<el-col :span="6">
<el-card header="選取檔案手動上傳" class="upload-card-box">
<el-upload
v-loading="uploadLoading"
ref="upload"
action="#"
:limit="uploadConfig.limit"
:file-list="fileList"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-change="handleChange"
:http-request="submitUpload"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">
選取檔案
</el-button>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="uplaodConfirm"
>
手動上傳
</el-button>
<div slot="tip" class="el-upload__tip">
隻能上傳 {{ fileType }} 檔案，且不超過{{ uploadConfig.size }}M
</div>
</el-upload>
</el-card>
</el-col>
<el-col :span="6">
<el-card header="拖拽自動上傳" class="upload-card-box">
<el-upload
v-loading="uploadLoading"
ref="upload"
drag
action="#"
multiple
:limit="uploadConfig.limit"
:file-list="fileList"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:http-request="autoUpload"
:auto-upload="true"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将檔案拖到此處，或
<em>點選上傳</em>
</div>
<div class="el-upload__tip" slot="tip">
隻能上傳 {{ fileType }} 檔案，且不超過{{ uploadConfig.size }}M
</div>
</el-upload>
</el-card>
</el-col>
<el-col :span="6">
<el-card header="拖拽手動上傳" class="upload-card-box">
<el-upload
v-loading="uploadLoading"
ref="upload"
drag
action="#"
multiple
:limit="uploadConfig.limit"
:file-list="fileList"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-change="handleChange"
:http-request="submitUpload"
:auto-upload="false"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将檔案拖到此處，或
<em>點選上傳</em>
</div>
<div class="el-upload__tip" slot="tip">
隻能上傳 {{ fileType }} 檔案，且不超過{{ uploadConfig.size }}M
</div>
</el-upload>
<el-button
style="margin-top: 10px"
size="small"
type="success"
@click="uplaodConfirm"
>
手動上傳
</el-button>
</el-card>
</el-col>
</el-row>
<el-card header="上傳配置" style=" 500px; margin-top: 20px">
<el-form :model="uploadConfig" label-width="auto">
<el-form-item label="檔案類型">
<el-select
v-model="uploadConfig.type"
placeholder="請選擇檔案類型"
multiple
style=" 100%"
>
<el-option
:label="item"
:value="item"
v-for="(item, index) in typeOption"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="檔案大小（M）">
<el-input
v-model.number="uploadConfig.size"
placeholder="請輸入内容"
></el-input>
</el-form-item>
<el-form-item label="上傳數量">
<el-input
v-model.number="uploadConfig.limit"
placeholder="請輸入内容"
></el-input>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
fileList: [],
typeOption: ['pdf', 'png', 'jpg', 'zip', 'xlsx', 'js', 'java', 'txt'],
uploadConfig: {
type: ['png', 'pdf', 'xlsx'],
size: 2,
limit: 2,
},
uploadLoading: false,
}
},
computed: {
fileType() {
return this.uploadConfig.type.join('/')
},
},
methods: {
// 超出限制警告
handleExceed(files, fileList) {
this.$message.warning(
`目前限制選擇 ${this.uploadConfig.limit} 個檔案，本次選擇了 ${
files.length
} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`
)
},
// 移除檔案
handleRemove(file) {
this.fileList = this.fileList.filter((item) => {
return item.name !== file.name
})
},
// 檔案校驗正則
isType(file) {
let reg = eval('/\\.(' + this.uploadConfig.type.join('|') + ')$/')
return reg.test(file.name)
},
// 手動上傳檔案前校驗
handleChange(file, fileList) {
if (!this.isType(file)) {
this.$message({
type: 'warning',
message: `上傳檔案隻能為 ${this.fileType} 檔案`,
})
fileList.pop()
this.fileList = fileList
return false
}
if (file.size / 1024 / 1024 > this.uploadConfig.size) {
this.$message({
type: 'warning',
message: `上傳檔案最大隻能${this.uploadConfig.size}M`,
})
fileList.pop()
this.fileList = fileList
return false
}
let existFile = fileList
.slice(0, fileList.length - 1)
.find((f) => f.name === file.name)
if (existFile) {
this.$message.warning('目前檔案已經存在!')
fileList.pop()
this.fileList = fileList
}
this.fileList = fileList
},
// 自動上傳檔案前校驗
beforeUpload(file, fileList) {
if (!this.isType(file)) {
this.$message({
type: 'warning',
message: `上傳檔案隻能為 ${this.fileType} 檔案`,
})
return false
}
if (file.size / 1024 / 1024 > this.uploadConfig.size) {
this.$message({
type: 'warning',
message: `上傳檔案最大隻能${this.uploadConfig.size}M`,
})
return false
}
console.log(this.fileList)
if (this.fileList.some((item) => item.name === file.name)) {
this.$message.warning('目前檔案已經存在!')
return false
}
this.fileList.push(file)
},
// 自動上傳
autoUpload(file) {
// 上傳主體 file.file
console.log(file)
this.uploadLoading = true
setTimeout(() => {
this.uploadLoading = false
this.$message({
type: 'success',
message: `上傳成功`,
})
}, 1000)
},
// 确定上傳
uplaodConfirm() {
this.$refs.upload.submit() //調用上傳方法
},
// 手動上傳
submitUpload() {
// 上傳主體每一項的 item.raw
console.log(this.fileList)
if (this.fileList.length === 0) {
this.$message({
type: 'warning',
message: '請先選擇檔案!',
})
return
}
this.uploadLoading = true
setTimeout(() => {
this.uploadLoading = false
this.$message({
type: 'success',
message: `上傳成功`,
})
this.fileList = []
}, 1000)
},
},
}
</script>
<style scoped lang="scss">
.upload-card-box {
height: 400px;
}
</style>
