[JavaScript知识库]简化代码操作-文件上传组件封装

写在前面

最近一直在写关于angular的教程，但是因为一直没写到自己比较满意的一个状态，所以就先放到草稿箱里面吧，等我写的差不多以后再发出来，但是一直没有进行文章的更新也挺烦的，所以给大家封几个组件吧，简化大家的代码，今天从文件上传开始吧！后续我会更新别的一些组件封装的代码，你们希望哪些组件封装的可以留言，说清楚基于什么ui库即可！

特殊说明

为什么我说可以简化大家的操作呢，我们一般使用文件上传或者是封装文件上传的时候，只是将该文件封装为一个可以import导入使用的组件，但是我们在更新文件的时候，需要调用emit导出去的函数进行更新我们的文件列表，使用该组件可以直接将最终的结果给你，而不必操心中间的一切过程，最后所见即所得！这也是该组件分享给大家的一个目的！希望用的觉得不错的回来点个赞！当前是基于elementUI+vue进行封装

组件源码

<!--
 * @use: <Upload></Upload>
 * @description: 文件上传
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2021-12-18 21:49:14
 * @LastEditTime: 2021-12-22 13:51:10
 * @FilePath: /vue-backend-dev/src/components/Upload/index.vue
-->
<template>
<div>
    <el-upload v-model="finalList" ref="uploadFile" :on-change="onChange" :on-progress="onProgress" :before-upload="beforeUpload" :on-error="onError" :on-success="onSuccess" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="limit" :on-exceed="handleExceed" :auto-upload="autoUpload" :data="params" :headers="headers" :list-type="listType" :multiple="multiple" :drag="drag" :action="action" :file-list="fileList">
        <template v-if="drag">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">{{fileDesc}}} </div>
        </template>
        <template v-else>
            <i class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">{{fileDesc}}</div>
        </template>
    </el-upload>
    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</div>
</template>

<script>
import {
    utils
} from '@/mixins'
import {
    baseURL
} from '@/util/https/http.js'
import {
    uploadFiles
} from '@/util/apis/common.js'
export default {
    name: "Upload",
    mixins: [utils],
    props: {
        //上传限制
        limit: {
            type: Number,
            default: () => 3
        },
        //是否支持拖拽
        drag: {
            type: Boolean,
            default: () => false
        },
        //是否支持多选
        multiple: {
            type: Boolean,
            default: () => true
        },
        //预览列表的形式 可选值 text/picture/picture-card
        listType: {
            type: String,
            default: () => "picture-card"
        },
        //上传时需要的入参
        params: {
            type: Object,
            default: () => {
                return {
                    type: 1
                }
            }
        },
        //是否在选取文件后立即进行上传
        autoUpload: {
            type: Boolean,
            default: () => true
        },
        //文件大小
        fileSize: {
            type: Number,
            default: () => 10
        },
        //是否自定义上传文件
        customize: {
            type: Boolean,
            default: () => false
        },
        //导出去的list
        finalListProps: {
            type: Array,
            default: () => []
        },
        fileDesc: {
            type: String,
            default: () => "只能上传图片文件，且不超过10M"
        }
    },
    data() {
        return {
            action: this.customize ? "" : baseURL + '/oss/file/upload', //baseURL + '/oss/file/upload',
            dialogImageUrl: '',
            dialogVisible: false,
            headers: {
                // "Content-type": "multipart/form-data"
            }, //请求头
            fileList: [],
            defaultParams: {
                type: 1
            },
            finalList: this.finalListProps,
        }
    },
    model: {
        prop: 'finalListProps',
        event: 'change'
    },
    watch: {
        finalList(n) {
            this.$emit('change', n)
        }
    },
    created() {
        console.log(this.action)
    },
    methods: {
        //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
        beforeUpload(file) {
            console.log("beforeUpload ====>")
            console.log(file)
            //进行大小的限制 限制为10MB
            const checkSize = file.size > 1024 * 1024 * this.fileSize
            //进行格式的限制 限制为图片
            const checkType = !file.type.includes("image")
            return new Promise((resolve) => {
                if (checkSize) {
                    this.$message.error('照片大小超过' + this.fileSize + "M!")
                    this.clearErrorList(file)
                    return false
                } else if (checkType) {
                    this.$message.error('图片格式有误！请重新选择')
                    this.clearErrorList(file)
                    return false
                } else {
                    resolve(file)
                }
            })
        },
        /**
         * @function handleRemove  文件删除
         * @params file 文件
         * @params fileList 文件列表
         */
        handleRemove(file, fileList) {
            console.log(file, fileList);
            if (file.status == 'success') {
                this.notifyTips('文件操作提示', '成功删除', 'success')
            } else {
                this.notifyTips('文件操作提示', "删除失败", 'error')
            }
        },
        //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
        beforeRemove(file, fileList) {
            console.log("beforeRemove 文件删除====>")
            console.log(file)
            console.log(fileList)
            return new Promise((resolve, reject) => {
                this.$confirm('此操作将永久删除当前文件,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //清除当前列表的数据
                    resolve(file)
                    //将删除的list数据清除
                    this.finalList = this.delListById(file.response.data.id, this.finalList)
                }).catch(() => {
                    this.notifyTips('文件操作提示', "取消删除", 'warning')
                    reject(file)
                });
            })
        },
        /**
         * @function handlePreview  文件预览
         * @params file 文件
         * @params fileList 文件列表
         */
        handlePreview(file) {
            console.log("andlePreview 文件预览====>")
            console.log(file)
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //文件超出个数限制时的钩子
        handleExceed(files, fileList) {
            console.log("handleExceed ====>")
            console.log(files)
            console.log(fileList)

        },
        //文件上传时候的钩子
        onSuccess(response, file, fileList) {
            console.log("onSuccess ====>")
            console.log(response)
            if (response.success) {
                this.$emit('onSuccess', response.data)
                let _data = {
                    imgUrl: response.data.url,
                    ossId: response.data.id,
                    imgName: response.data.fileName
                }
                this.finalList.push(_data)
            } else {
                this.clearErrorList(file)
            }
            console.log(file)
            console.log(fileList)
        },
        //文件上传失败
        onError(err, file, fileList) {
            this.clearErrorList(file)
            console.log("onError ====>")
            console.log(err)
            console.log(file)
            console.log(fileList)
        },

        //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        onChange(file, fileList) {
            console.log("onChange ====>")
            console.log(file)
            // this.$emit('getLists', res.data)
            console.log(fileList)
        },
        //文件上传时的钩子
        onProgress(event, file, fileList) {
            console.log("onProgress ====>")
            console.log(event)
            console.log(file)
            console.log(fileList)
        },
        //清除上传失败的文件列表 去除文件列表失败文件
        clearErrorList(file) {
            let uid = file.uid
            let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)
            this.$refs.uploadFile.uploadFiles.splice(idx, 1)
        },
        //自定义上传文件 此时是不再执行上传成功的钩子  目前不使用
        upLaodFiles(files) {
            console.log("uploadFiles====>")
            console.log(files)
            let file = files.file
            console.log(file)
            let formData = new FormData();
            formData.append("uid", file.uid);
            formData.append("name", file.name);
            formData.append("size", file.size);
            formData.append("type", file.type);
            formData.append("webkitRelativePath", file.webkitRelativePath);
            formData.append("lastModified", file.lastModified);
            console.log(formData)
            let params = {
                file: formData,
                type: 1
            }
            uploadFiles(params).then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err)
                this.clearErrorList(file)
            })
        },
    }
}
</script>

<style lang="less" scoped>
</style>

全局安装该组件 install.js

/*
 * @use: 
 * @description: 全局安装封装的组件
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2021-08-28 10:46:43
 * @LastEditTime: 2021-12-31 11:27:51
 * @FilePath: /activityGd/src/components/install.js
 */
// 组件全局注册
import Vue from 'vue'

import Upload from './Upload'
// 组件库
const Components = [   
    Upload,
]
// 注册全局组件
Components.map((com) => {
    Vue.component(com.name, com)
})
export default Vue

具体使用

第一步：main.js

import './components/install'

vue页面需要使用的地方

<Upload v-model="filelist"></Upload>