elementui使用el-upload組件如何實(shí)現(xiàn)自定義上傳
使用el-upload組件實(shí)現(xiàn)自定義上傳
方式一:選擇后自動上傳
使用 http-request 覆蓋默認(rèn)的上傳行為,可以自定義上傳的實(shí)現(xiàn)
利用 before-upload 上傳文件之前的鉤子,參數(shù)為上傳的文件,若返回 false 或者返回 Promise且被 reject,則停止上傳
template 部分
<el-upload ? ?class="pad" ? ?ref="upload" ? ?action="action" ? ?:http-request="uploadBpmn" ? ?:before-upload="beforeUpload"> ? ?<el-button size="medium" type="primary" class="el-icon-upload"> 部署流程定義</el-button> ?</el-upload>
js 部分
beforeUpload (file) { // 上傳文件之前鉤子 ? const type = file.name.split('.')[1] ? if (type !== 'bpmn') { ? ? this.$message({ type: 'error', message: '只支持bpmn文件格式!' }) ? ? return false ? } }, uploadBpmn (param) { // 部署流程定義(點(diǎn)擊按鈕,上傳bpmn文件,上傳成功后部署,然后重新加載列表) ? const formData = new FormData() ? formData.append('processDefinition', param.file) // 傳入bpmn文件 ? this.$API({ ? ? name: 'deploy', ? ? data: formData, ? ? headers: {'Content-Type': 'multipart/form-data'} ? }).then(res => { ? ? if (res.data.code == 0) { ? ? ? this.$message({ type: 'success', message: res.data.msg }) ? ? } else { ? ? ? this.$message({ type: 'error', message: res.data.msg }) ? ? } ? }).catch(error => { ? ? this.$message({ type: 'error', message: error }) ? }).finally(() => { ? ? this.getList() ? }) },
如果不想上傳成功后顯示上傳文件列表,可以隱藏掉文件列表
可以在組件中設(shè)置 :show-file-list="false"
或者
::v-deep .el-upload-list { ? display: none !important; }
方式二:選擇后手動上傳
<template> ? <div class="app-upload"> ? ? <div class="upload-title">上傳文件</div> ? ? <el-upload ? ? ? class="upload-demo" ? ? ? ref="uploadBox" ? ? ? drag ? ? ? action="action" ? ? ? :before-upload="beforeUpload" ? ? ? :http-request="upload" ? ? ? :auto-upload="false" ? ? ? multiple> ? ? ? <i class="el-icon-upload"></i> ? ? ? <div class="el-upload__text">將文件拖到此處,或<em>點(diǎn)擊上傳</em></div> ? ? </el-upload> ? ? <div class="upload-btn"> ? ? ? <el-button type="primary" @click="sure" :loading="loading">確 定</el-button> ? ? </div> ? </div> </template>
<script> const formData = new FormData() export default { ? data () { ? ? return { ? ? ? loading: false ? ? } ? }, ? methods: { ? ? beforeUpload (file) { // 上傳文件之前鉤子 ? ? ? formData.append('files', file) ? ? }, ? ? upload () { ? ? ? this.loading = true ? ? ? this.$API({ ? ? ? ? name: 'UploadResource', ? ? ? ? data: formData, ? ? ? ? params: { ? ? ? ? ? path: this.$route.query.path ? ? ? ? }, ? ? ? ? requireAuth: true ? ? ? }).then (res => { ? ? ? ? if (res.data.code === 200) { ? ? ? ? ? this.$notify.success(res.data.msg) ? ? ? ? } else { ? ? ? ? ? this.$notify.error(res.data.msg) ? ? ? ? } ? ? ? }).catch(error => { ? ? ? ? this.$notify.error(error) ? ? ? }).finally(() => { ? ? ? ? this.loading = false ? ? ? ? this.reset() ? ? ? }) ? ? }, ? ? sure () { ? ? ? this.$refs.uploadBox.submit() ? ? }, ? } } </script>
使用el-upload上傳文件夾
只需要為 input 輸入框設(shè)置 webkitdirectory 屬性
? mounted() { ? ? if (this.$route.query.type === 'folder') { ? ? ? this.$nextTick(() => { ? ? ? ? document.querySelector('.el-upload__input').webkitdirectory = true ? ? ? }) ? ? } ? },
封裝elementui el-upload文件上傳組件
// 自定義的全局組件my-component let _utils = new Utils() Vue.component( 'uploadfile', { props: { uploaddata: { type: Object } }, template: `<div style="margin:20px 0;"> <el-upload accept=".xls,.xlsx" class="upload-demo" :action="uploaddata.url" :before-upload="beforeUpload" :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="2" :on-exceed="handleExceed"> <span>表名稱:{{uploaddata.sheetname}}</span> <el-button size="small" type="primary">選擇文件</el-button> <!-- <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件,且不超過500kb</div>--> </el-upload> </div>`, data() { return {} }, methods: { /* 上傳文件之前的鉤子,參數(shù)為上傳的文件, 若返回 false 或者返回 Promise 且被 reject,則停止上傳。 */ beforeUpload(file){ const fileSuffix = file.name.substring(file.name.lastIndexOf(".")+1); const whiteList = ["xls", "xlsx"]; if (whiteList.indexOf(fileSuffix) === -1) { _utils.MessageError(this,"上傳文件只能是xls、xlsx格式") return false; } const isLt2M = file.size / 1024 / 1024 < 5; if (!isLt2M) { _utils.MessageError(this,"上傳文件大小不能超過5MB") return false; } }, handleRemove(file, fileList) { }, handleSuccess(response, file, fileList) { let {code, msg} = response if (code == 0) { utils.MessageSuccess(this, "文件上傳成功") } else { utils.MessageError(this, msg) } }, /* 點(diǎn)擊文件列表中已上傳的文件時的鉤子 */ handlePreview(file) { // console.log(file); }, /* 文件超出個數(shù)限制時的鉤子 */ handleExceed(files, fileList) { }, /* 刪除文件之前的鉤子,參數(shù)為上傳的文件和文件列表, 若返回 false 或者返回 Promise 且被 reject,則停止刪除 */ beforeRemove(file, fileList) { // return this.$confirm(`確定移除 ${file.name}?`); } } } )
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談在Vue.js中如何實(shí)現(xiàn)時間轉(zhuǎn)換指令
這篇文章主要介紹了淺談在Vue.js中如何實(shí)現(xiàn)時間轉(zhuǎn)換指令,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01