完全基于elementui組件封裝的上傳組件 ，后期繼續(xù)優(yōu)化

<template>
    <div>
        <el-upload
            class="upload-demo"
            :headers="headers"
            :data='uploadData'
            :action="action"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success='handleSuccess'
            :before-remove="beforeRemove"
            :before-upload='beforeUpload'
            :multiple='false'
            :limit="10"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">點擊上傳</el-button>
            <div slot="tip" class="el-upload__tip">只能上傳<span v-for="(v,i) in fileTypeList" :key="i">.{{v}}<i v-if="i+1 < fileTypeList.length">、</i></span>等格式文件，最大10M</div>
            </el-upload>
        <el-dialog class="common-dialog" title="詳情" v-if="preview" :visible.sync="preview" width="1000rem" append-to-body>
            <div>
                  <img style="width: 100%; height:800px;" :src="currentImg" alt="">
            </div>
        </el-dialog>  
    </div>

</template>
<script>
    import * as config from '@/common/env.json';
    export default {
        // list:文件列表 數(shù)組，fieldName 字段名， prefix 是 prefix對應(yīng)的 參數(shù)名
        props:['List','fieldName','prefix'],
        data() {
            return {
                // 允許上傳的文件類型
                fileTypeList:['png','jpg','jpeg','gif','slx','xlsx','doc','docx','pdf'],
                fileList:[],
                // 傳給后端的參數(shù)
                uploadData:{},
                // 設(shè)置請求頭
                headers:{
                    token:sessionStorage.getItem('token')
                },
                // 設(shè)置請求地址
                action: (process.env.NODE_ENV == 'development'? config.serviceUrlDev: config.serviceUrlProd)+'control/file/uploadFile', //action就寫成上傳文件的接口我這里是動態(tài)設(shè)置請求地址
                preview: false,
                currentImg:null,
                fileUrl:null,
            }
        },
        created() {
            this.fileUrl = process.env.NODE_ENV == 'development' ? config.serviceUrlDev + config.fileService : config.serviceUrlProd + config.fileService;
            this.uploadData={ prefix:this.prefix}
        },
        watch:{
        //深度監(jiān)聽 不知道這步起效果沒有
            List:{
                  handler(n, o){
                    if(n){
                        this.fileList=n;
                    }
                  },
                  immediate: false
            }
        },
        methods: {
        //拼接圖片完整地址
            funPicture(item) {
                return this.fileUrl + item;
            },
            //刪除文件方法
            handleRemove(file, fileList) {
                let data=[];
                for(let i of  fileList){
                    data.push(i.url)
                }
                let  dataStr=(data && data.length !=0) ? data.join(','):'';
                this.$emit('uploadDone',dataStr,this.fieldName)
            },
            //點擊文件列表的文件觸發(fā)的事件
            handlePreview(file) {
                console.log(file)
                if( this.$formatFileType(file.name.substring(file.name.lastIndexOf('.') + 1))=='pic'){
                    this.currentImg=this.funPicture(file.url);
                    this.preview=true;
                }else{
                    this.downLoad(file)
                }
            },
            handleExceed(files, fileList) {
                this.$message.warning(`當(dāng)前限制選擇 10 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
            },
            beforeRemove(file, fileList) {
                // return this.$confirm(`確定移除 ${ file.name }？`);
            },
            //上傳之前做文件類型和大小判斷
            beforeUpload(file){
                let arr = file.name.split('.');
                let istrue = this.fileTypeList.indexOf(arr[arr.length - 1]);
                if (istrue == -1) {
                    this.$message.warning('錯誤！文件格式不支持')
                    return false
                }
                if (file.size > 10485760) {
                    this.$message.warning('錯誤！文件大小不能超過10M')
                    return false
                }
                
            },
            //完成上傳的事件 做后續(xù)操作
            handleSuccess(response, file, fileList){
                if(response.success){
                    let data=[];
                    for(let i of this.fileList){
                        data.push(i.url);
                    }
                    data.push(response.data);
                    let  dataStr=data.join(',')
                    this.$emit('uploadDone',dataStr,this.fieldName)
                }
            },
            //下載文件
            downLoad(file) {
                let fileDto = {
                    prefix: 'file/'+file.prefix,
                    fileName: file.name
                }
                this.$api.apiFileDownloadFile(fileDto).then((data) => {
                    const url = window.URL.createObjectURL(new Blob([data], { type: "application/pdf" }))
                    const link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', file.name)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                })
            },
        }
    }
</script>

父組件使用
1、引入組件文章來源地址http://www.zghlxwxcb.cn/news/detail-766008.html

                                <IDCardUploader   @uploadDone='uploadDone'   :list='formData.cardUpload'  fieldName='cardUpload'   prefix='cardUpload'  ></IDCardUploader>


 uploadDone(val,fileName){
                // console.log(val,fileName)
                this.formData[fileName]=val;
                console.log(this.formData)
            },

到了這里，關(guān)于vue2+element ui 上傳文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！