欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

elementui使用el-upload組件如何實(shí)現(xiàn)自定義上傳

 更新時間:2022年08月02日 10:43:04   作者:風(fēng)如也  
這篇文章主要介紹了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的props配置項詳解

    Vue的props配置項詳解

    這篇文章主要為大家詳細(xì)介紹了Vue的props配置項,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • vue實(shí)現(xiàn)圖片切換效果

    vue實(shí)現(xiàn)圖片切換效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • 淺談在Vue.js中如何實(shí)現(xiàn)時間轉(zhuǎn)換指令

    淺談在Vue.js中如何實(shí)現(xiàn)時間轉(zhuǎn)換指令

    這篇文章主要介紹了淺談在Vue.js中如何實(shí)現(xiàn)時間轉(zhuǎn)換指令,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue el-upload 上傳文件格式校驗(yàn)方法

    vue el-upload 上傳文件格式校驗(yàn)方法

    這篇文章主要介紹了vue el-upload 上傳文件格式校驗(yàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-11-11
  • 在vscode里使用.vue代碼模板的方法

    在vscode里使用.vue代碼模板的方法

    本篇文章主要介紹了在vscode里使用.vue代碼模板的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue2.0組件之間傳值、通信的多種方式(干貨)

    vue2.0組件之間傳值、通信的多種方式(干貨)

    這篇文章主要介紹了vue2.0組件之間傳值、通信的多種方式以及注意要點(diǎn),需要的朋友可以參考下
    2018-02-02
  • vue 遮罩層阻止默認(rèn)滾動事件操作

    vue 遮罩層阻止默認(rèn)滾動事件操作

    這篇文章主要介紹了vue 遮罩層阻止默認(rèn)滾動事件操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue實(shí)例的選項總結(jié)

    vue實(shí)例的選項總結(jié)

    這篇文章主要介紹了Vue實(shí)例的選項有哪些,文中講解非常細(xì)致,代碼幫助大家更好的學(xué)習(xí),感興趣的朋友可以了解下
    2020-06-06
  • element?el-select下拉框選擇失效解決辦法

    element?el-select下拉框選擇失效解決辦法

    el-select即選擇器用于從若干個候選項中選擇其中一個(或者多個),在傳統(tǒng)網(wǎng)頁開發(fā)中選擇器經(jīng)常被稱作下拉框、下拉列表是最常用的表單元素之一,這篇文章主要給大家介紹了關(guān)于element?el-select下拉框選擇失效解決辦法,需要的朋友可以參考下
    2023-08-08
  • vue.js實(shí)現(xiàn)表格合并示例代碼

    vue.js實(shí)現(xiàn)表格合并示例代碼

    最近工作中遇到一個需求,是要做一個頁面放張大表格用來顯示數(shù)據(jù)項,純粹為了view層操作方便,就用了vue做渲染。然而又被提出了一個需求,需要相鄰的相同值的行數(shù)據(jù)項進(jìn)行單元格合并,這就醉了。沒辦法,只能想辦法解決,下面通過這篇文章來一起看看吧。
    2016-11-11

最新評論