1. 前提

已安裝elementUI并正確引入

2. 參數(shù)說明

具體可參考HTML5 input file類型，accept（文件類型控制）

• 這個(gè)是直接使用<input type='file'>一樣的屬性了，accept屬性的值可以是accept="image/gif, image/jpeg, text/plain, application/pdf"等等.
• 添加了accept屬性僅僅是選擇文件時(shí)限制格式，其實(shí)用戶還是可以點(diǎn)選“所有文件”選項(xiàng)，上傳其他格式。
• 如果需要在上傳時(shí)校驗(yàn)文件格式，則需要在:before-upload或on-change這個(gè)鉤子綁定相應(yīng)的方法來校驗(yàn)，具體校驗(yàn)方法查看3. 頁面中使用中的beforeUpload和handleChange方法

this.$refs.upload.abort( file);/ /這里的file為fileList 中的 file 對象

<div slot="tip" class="el-upload__tip">請上傳圖片格式文件</div>

this.$refs.upload.abort( file);/ /這里的file為fileList 中的 file 對象

其他參數(shù)具體參考
elementUI官方API文檔>upload

3. 頁面中使用

• template

<template>
    <el-upload
        :class="{disabled:preview||fileIds.length===1}"
        ref="upload"
        action
        list-type="picture-card"
        :file-list="fileList"
        :disabled="preview"
        accept="image/jpeg,image/gif,image/png"
        :multiple="true"
        :limit="1"
        :auto-upload="true"
        :on-preview="handlePictureCardPreview"
        :before-remove="beforeRemove"
        :http-request="getUploadFile"
        :before-upload="beforeUpload"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :on-progress="onProgress"
        :on-error="handleError"
        :on-exceed="handleExceed"
    >
        <!-- 觸發(fā)上傳的按鈕 -->
        <i class="el-icon-plus"></i>
        <div slot="tip" class="el-upload__tip">請上傳圖片格式文件</div>
    </el-upload>
</template>

• script

<script>
export default {
    data() {
        return {   
            /* 文件上傳區(qū) */
            fileList: [], // 文件列表
            isValidUpload: true, // 圖片是否符合要求
            delFileUid: '', // 待刪除的圖片uid
            dialogImageUrl: '', // 預(yù)覽的圖片地址
            dialogVisible: false, // 是否顯示-預(yù)覽圖片
            fileObj: {}, // 待上傳文件
            fileIds: [], // 存放文件uid與后臺傳過來的id
            imgId: [] // 需要上傳的后端返回的文件ID
        }；
    }，
    methods:{
        // --------------------el-upload上傳文件-開始--------------------
        // 圖片預(yù)覽-on-preview-事件
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        // 文件上傳
        // autoUpload

        // 文件上傳-on-exceed-事件-文件超出個(gè)數(shù)限制時(shí)的鉤子
        handleExceed(files, fileList) {
            this.$message.warning(`當(dāng)前限制選擇 5 個(gè)文件,請重新選擇`);
        },

          // 文件上傳-on-change-事件-文件狀態(tài)改變時(shí)的鉤子，添加文件、上傳成功和上傳失敗時(shí)都會(huì)被調(diào)用
        handleChange(file, fileList) {
            // console.log('handleChange>', 'file', file, 'fileList', fileList);
            // console.log('file.type', file.raw.type);
            const isPNG = file.raw.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            let errMsg = '';
            if (!isPNG) {
                errMsg = '上傳圖片只能是 JPG 格式!';
                // this.$message.error('上傳圖片只能是 JPG 格式!');
                fileList = fileList.pop();
            } else if (!isLt2M) {
                errMsg = '上傳圖片大小不能超過 2MB!';
                // this.$message.error('上傳圖片大小不能超過 2MB!');
                fileList = fileList.pop();
            }
            this.isValidUpload = isPNG && isLt2M;
            if (!this.isValidUpload) {
                this.$confirm(`${errMsg}`, '系統(tǒng)提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    showCancelButton: false,
                    customClass: 'confirm-success',
                    type: 'error'
                })
                    .then(() => {
                        //
                    })
                    .catch(() => {
                        //
                    });
            }
            return this.isValidUpload;
        },

        // 文件上傳-before-upload-事件-文件上傳前
        beforeUpload(file) {
            // console.log('beforeUpload>', 'file', file);
            this.fileObj = new FormData();
            this.fileObj.append('file', file, file.name);
            console.log('beforeUpload>', 'file', file, 'fileObj', this.fileObj);
            if (file.type.split('/')[0] === 'image') {
                let _this = this;
                let reader = new FileReader();
                // let fileNew = event.target.files[0];// 寫在beforupload時(shí)注釋掉此行,在handleChange中時(shí)取消此行的注釋
                reader.readAsDataURL(file);
                reader.onload = function(theFile) {
                    let image = new Image();
                    image.src = theFile.target.result;
                    image.onload = function() {
                        if (!_this.creativeSize(this.width, this.height)) {
                            _this.$message.info(
                                `${file.name}尺寸為${this.width}*${this.height}，圖片最佳比例為 560 * 670 ！`
                            );
                            file.width = this.width;
                            file.height = this.height;
                            console.log(file.width, file.height);
                        } else {
                            file.width = this.width;
                            file.height = this.height;
                            console.log(file.width, file.height);
                        }
                    };
                };
            };
        },

        // 方法-計(jì)算圖片比例是否符合要求
        creativeSize(width, height) {
            let minWidth = 560;
            let minHeight = 670;
            let isCreativeSize = true;
            if (width * minHeight > height * minWidth) {
                isCreativeSize =
                    width - Math.ceil((height * minWidth) / minHeight) < 2;
            } else {
                isCreativeSize =
                    height - Math.ceil((width * minHeight) / minWidth) < 2;
            }

            if (width < minWidth || height < minHeight) {
                // this.$message.error(`像素不夠`);
                return false;
            } else if (isCreativeSize) {
                return true;
            } else {
                return false;
            }
        },

        // 文件上傳-http-request-事件-攔截請求
        getUploadFile(fileObj) {
            // console.log('getUploadFile>', 'fileObj', fileObj);
            // 上傳圖片
            if (this.isValidUpload) {
                // 請求接口-上傳圖片
                this.uploadFile(this.fileObj).then(res => {
                    // console.log('uploadFile', res);
                    if (res.code === 1) {
                        this.fileIds.push({
                            uid: fileObj.file.uid,
                            imgId: res.data
                        });
                    }
                    // console.log('uploadFile>','fileIds', this.fileIds);
                });
            }
        },

        // 文件上傳-on-progress-事件
        onProgress(event, file, fileList) {
            // console.log('onProgress', response, file, fileList);
        },

        // 文件上傳-before-remove-事件-移除文件前
        beforeRemove(file, fileList) {
            // console.log('beforeRemove>','file', file);
            return this.$confirm(`確定移除 ${file.name}？`);
        },

        // 文件上傳-on-remove-事件-移除文件后
        handleRemove(file, fileList) {
            for (let i = 0; i < this.fileIds.length; i++) {
                if (this.fileIds[i].uid === file.uid) {
                    if (!this.delFileUid) {
                        this.delFileUid = this.fileIds[i].imgId;
                    } else {
                        this.delFileUid =
                            `${this.delFileUid},` + this.fileIds[i].imgId;
                    }
                    this.fileIds.splice(i, 1);
                }
            }
            // console.log('handleRemove>', 'delFileUid', this.delFileUid);
            let params = {
                id: this.delFileUid
            };
            this.delsData(params);
        },

        // 接口-刪除文件
        delsData(params) {
            if (this.delFileUid) {
                this.dels({ ids: this.delFileUid }).then(res => {
                    // console.log('dels', res);
                    this.delFileUid = '';
                    console.log('delsData>', 'delFileUid', this.delFileUid);
                });
            }
        },

        // 文件上傳-on-error-事件
        handleError(err, file, fileList) {
            console.log('handleError', err, file, fileList);
        },
       
        // --------------------el-upload上傳文件-結(jié)束-------------------- *

        // 表單提交
        submit(formName) {
            console.log('ruleForm',this.ruleForm);
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log('submit');
                    let imgId = [];
                    for (let i = 0; i < this.fileIds.length; i++) {
                        imgId.push(this.fileIds[i].imgId);
                    }
                    let params = {
                        name: this.ruleForm.name,
                        fileIds: imgId
                    };
                    // 提交接口
                    this.interfaceName(params)
                        .then(res => {
                            console.log(res);
                            if (res.code === 1) {
                                this.$confirm(`提交成功`, '系統(tǒng)提示', {
                                    confirmButtonText: '確定',
                                    cancelButtonText: '取消',
                                    showCancelButton: false,
                                    customClass: 'confirm-success',
                                    type: 'success'
                                })
                                    .then(() => {
                                        this.$router.push('');
                                    })
                                    .catch(() => {
                                        // this.$message.info('已取消');
                                    });
                            } else {
                                // this.$message.error(res.msg);
                            }
                            this.fileIds = [];// 清除待文件序列
                            this.resetFormDetail();
                            this.$refs.upload.clearFiles();// 清除上傳列表
                        })
                        .catch(err => {
                            console.log(err);
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        // 方法-重置表單
        resetFormDetail() {
            this.formDetail.name = '';
        },
    }
}
</script>

二、input等的change事件中傳遞自定義參數(shù)

通過鼠標(biāo)或鍵盤輸入字符

Input 為受控組件，它總會(huì)顯示 Vue 綁定值。
通常情況下，應(yīng)當(dāng)處理 input 事件，并更新組件的綁定值（或使用v-model）。否則，輸入框內(nèi)顯示的值將不會(huì)改變。
不支持 v-model 修飾符。

一、無效寫法

@change="doSomething(val, index)"

<div v-for="(item,index) in itemList">
   <el-input v-model="item.value" @change="doSomething(val, index)"> </el-input >
</div>

二、有效寫法

@change="((val)=>{changeStatus(val, index)})"

<div v-for="(item,index) in itemList">
   <el-input v-model="item.value" @change="((val)=>{doSomething(val, index)})"> </el-input>
 </div>

https://www.jianshu.com/p/3401d353eda4。文章來源地址http://www.zghlxwxcb.cn/news/detail-412844.html

到了這里，關(guān)于vue element-ui 常用事件方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！