一. 为什么要使用弹框

  在一个页面当中,通常会因为各种要展示数据填满了用户视图(view),当前界面会显的寸土寸金,或者当前界面需要新增一个小的功能而不需要重新增加页面,造成代码冗余,如此一来弹框就派上了用场了!

二.新建一个upload.vue 文件 在父组件内部去引入这个文件(单文件上传)

1.  
   <template>
2.  
   <el-dialog
3.  
   title="上传文件"
4.  
   :close-on-click-modal="false"
5.  
   @close="closeHandle"
6.  
   :visible.sync="commonUploadvisible"
7.  
   >
8.  
    
9.  
   /*
10.  
    accept 认证的文件类型 这里的multiple 一般关掉,多选的时候是一个一个上传的
11.  
    会发送多个请求 如果文件依次上传的过多会造成服务器,会给公司服务器造成过多的负荷,
12.  
    当然也可以使用limit 属性去限制数量,不过我个人不建议使用
13.  
    } */
14.  
    <el-upload
15.  
    drag
16.  
    accept=""
17.  
    :action="url"
18.  
    :before-upload="beforeUploadHandle"
19.  
    :on-success="successHandle"
20.  
    :headers="headers"
21.  
    :data="{ namespace: classifyUploadFlag.namespace}"
22.  
    :multiple="false"
23.  
    :file-list="fileList"
24.  
    style="text-align: center"
25.  
    >
26.  
    <i class="el-icon-upload"></i>
27.  
    <div class="el-upload__text">
28.  
    将文件拖到此处，或
29.  
    <em>点击上传</em>
30.  
    </div>
31.  
    <div class="el-upload__tip" slot="tip">只支持.xlsx. xls格式的文件！</div>
32.  
    </el-upload>
33.  
    </el-dialog>
34.  
    </template>
35.  
     
36.  
    <script>
37.  
    import local from '@/local/loacl'
38.  
    export default {
39.  
    data() {
40.  
    return {
41.  
    commonUploadvisible: false,
42.  
    // 父组件传递过来的 url
43.  
    url: uploadUrl || this.HOST '/dict/classify/import',
44.  
    beforeNum: 0,
45.  
    successNum: 0,
46.  
    fileList: [],
47.  
    headers: {
48.  
    token: JSON.parse(local.get('Token'))
49.  
    }
50.  
    }
51.  
    },
52.  
    props: {
53.  
    classifyUploadFlag: {
54.  
    type: Object,
55.  
    default: () => {}
56.  
    },
57.  
    uploadUrl:{
58.  
    type: String,
59.  
    default: ''
60.  
    }
61.  
    },
62.  
     
63.  
    methods: {
64.  
    // 上传之前
65.  
    beforeUploadHandle(file) {
66.  
    const TYPE = ['xls', 'xlsx']
67.  
    const extension = TYPE.includes(file.name.split('.')[1])
68.  
     
69.  
    const isLt2M = file.size / 1024 / 1024 < 5
70.  
     
71.  
    if (!extension) {
72.  
    this.$message.error('上传模板只能是 xls、xlsx格式!')
73.  
    }
74.  
     
75.  
    if (!isLt2M) {
76.  
    this.$message.error('上传模板大小不能超过 5MB!')
77.  
    }
78.  
    this.beforeNum
79.  
    return extension && isLt2M
80.  
    },
81.  
    // 上传成功
82.  
    successHandle(response, file, fileList) {
83.  
    this.fileList = fileList
84.  
    this.successNum
85.  
    // response &&
86.  
     
87.  
    console.log(response, file, fileList)
88.  
    if (response.code === 1000) {
89.  
    if (this.beforeNum=== this.successNum) {
90.  
    this.$confirm('操作成功, 是否继续操作?', '提示', {
91.  
    confirmButtonText: '确定',
92.  
    cancelButtonText: '取消',
93.  
    type: 'warning'
94.  
    }).catch(() => {
95.  
    this.$emit('refreshDataUpload', false)
96.  
    })
97.  
    }
98.  
    } else if (response.code === 0) {
99.  
    this.$message.error(response.message)
100.  
     }
101.  
     },
102.  
     // 弹窗关闭时
103.  
     closeHandle() {
104.  
     this.fileList = []
105.  
     this.$emit('refreshDataUpload', false)
106.  
     }
107.  
     }
108.  
     }
109.  
     </script>

  三.多文件上传

  1.多文件上传时不再需要 before 和 success 的钩子函数了只需要 :on-change="handleChange"

   2.配合limit 属性  以及 ::on-exceed钩子进行配合使用

   3.修改参数后,统一上传.

1.  
   <template>
2.  
   <div class="uploadList">
3.  
   <el-dialog
4.  
   :before-close="handleClose"
5.  
   :visible.sync="uploadVisible"
6.  
   title="批量上传"
7.  
   width="40%"
8.  
   >
9.  
   // :auto-upload="false" 禁止自动上传改为手动上传,
10.  
    <div class="uploadListinner">
11.  
    <el-upload
12.  
    ref="upload"
13.  
    :action="uploadUrlList"
14.  
    :auto-upload="false"
15.  
     
16.  
    :limit="20"
17.  
    :on-change="handleChange"
18.  
    accept=".jpg,.jpeg"
19.  
    class="upload-demo"
20.  
    drag
21.  
    multiple
22.  
    >
23.  
    <i class="el-icon-upload"></i>
24.  
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
25.  
    <div slot="tip" class="el-upload__tip">
26.  
    只能上传jpg/jpeg文件，且不超过5MB
27.  
    <div v-if="idCardSubTittle">
28.  
    <br>图片命名规范：使用身份证号
29.  
    <br>PS:123456789111111
30.  
    </div>
31.  
    </div>
32.  
    </el-upload>
33.  
    </div>
34.  
    <span slot="footer" class="dialog-footer">
35.  
    <el-button @click="cancle()">取 消</el-button>
36.  
    <el-button type="primary" @click="uploadFile">确 定</el-button>
37.  
    </span>
38.  
    </el-dialog>
39.  
    </div>
40.  
    </template>
41.  
     
42.  
    <script>
43.  
     
44.  
    import { uploads} from '@/api/uploads'
45.  
    export default {
46.  
    props: {
47.  
    uploadVisible: {
48.  
    type: Boolean,
49.  
    default: () => false
50.  
    }
51.  
    },
52.  
    data() {
53.  
    return {
54.  
     
55.  
    fileList: [],
56.  
    uploadUrl: process.env.VUE_APP_VIDEO_UPLOADS,
57.  
    }
58.  
    },
59.  
    methods: {
60.  
    cancle() {
61.  
    this.$emit('handlerClickVisible', false)
62.  
    this.$refs.upload.clearFiles()
63.  
    this.fileList = []
64.  
    },
65.  
    handleClose(done) {
66.  
    this.$emit('handlerClickVisible', false)
67.  
    this.$refs.upload.clearFiles()
68.  
    this.fileList = []
69.  
    done()
70.  
    },
71.  
    // 选择文件时，往fileList里添加
72.  
    handleChange(fileList) {
73.  
    const isJpgOrPng =
74.  
    fileList.raw.type === 'image/jpeg' || fileList.raw.type === 'image/jpg'
75.  
    let isLt2M = fileList.size / 1024 / 1024 < 5 // 判定图片大小是否小于5MB
76.  
    if (!isLt2M) {
77.  
    this.fileList = []
78.  
    return this.$message.error('上传头像图片大小不能超过5MB')
79.  
    }
80.  
    if (!isJpgOrPng) {
81.  
    this.fileList = []
82.  
    return this.$message.error('上传头像图片只能是 JPG格式!')
83.  
    }
84.  
    this.fileList.push(fileList)
85.  
    console.log(fileList, this.fileList, fileList.raw.type, isJpgOrPng, 67)
86.  
    },
87.  
    //uploadFile
88.  
    uploadFile() {
89.  
    if (!this.fileList.length) return this.$message.error('未选取文件')
90.  
    // NEW 一个表单文件对象,
91.  
    let formData = new FormData()
92.  
    this.fileList.forEach((item) => {
93.  
    formData.append('files', item.raw)
94.  
    })
95.  
    uploads({
96.  
    method: 'post',
97.  
    /* url: this.uploadUrl, 可以reset url,看情况而定 */
98.  
    headers: { 'content-type': 'multipart/form-data;charset=utf-8' },
99.  
    data: formData
100.  
     })
101.  
     .then(async (res) => {
102.  
     if (res.data.code === '500') {
103.  
     return this.$message.error(res.data.msg)
104.  
     }
105.  
     if (res.data.code === '200') {
106.  
     const data = await saveFiles(res.data.data)
107.  
     if (data.code !== '200') return this.$message.error('上传失败!')
108.  
     console.log(data, 'filereq')
109.  
     this.$confirm('批量上传成功, 是否继续?', '提示', {
110.  
     confirmButtonText: '继续',
111.  
     cancelButtonText: '取消',
112.  
     type: 'success'
113.  
     })
114.  
     .then(() => {
115.  
     this.$refs.upload.clearFiles()
116.  
     this.fileList = []
117.  
     })
118.  
     .catch(() => {
119.  
     this.$emit('handlerClickVisible', false)
120.  
     this.$refs.upload.clearFiles()
121.  
     this.fileList = []
122.  
     })
123.  
     }
124.  
     })
125.  
     .catch((err) => {
126.  
     console.log(err)
127.  
     })
128.  
     // axios({}).then(res=>{
129.  
     // console.log(res)
130.  
     // }
131.  
     }
132.  
     }
133.  
     }
134.  
     </script>
135.  
      
136.  
      

这篇好文章是转载于：学新通技术网