封装一个Vue文件上传组件案例详情

目录

• 前言
• 1. 子组件
• 2 父组件使用
• 3.效果
• 4.总结

前言

在面向特定用户的项目中，引 其他ui组件库导致打包体积过大，首屏加载缓慢，还需要根据UI设计师设计的样式，重写大量的样式覆盖引入的组件库的样式。因此尝试自己封装一个自己的组件，代码参考了好多前辈的文章

1. 子组件

<template>
    <div class="digital_upload">
        <input
            style="display: none"
            @change="addFile"
            :multiple="multiple"
            type="file"
            :name="name"
            :id="id"
            :accept="accept"
        />
        <label :for="id">
            <slot></slot>
        </label>
    </div>
</template>

<script>
export default {
    name: 'my-upload',
    props: {
        name: String,
        action: {
            type: String,
            required: true
        },
        fileList: {
            type: Array,
            default () {
                return []
            }
        },
        accept: {
            type: String,
            require: true
        },
        id: {
            type: String,
            default: 'my-upload'
        },
        data: Object,
        multiple: Boolean,
        limit: Number,
        onChange: Function,
        onBefore: Function,
        onProgress: Function,
        onSuccess: Function,
        onFailed: Function,
        onFinished: Function
    },
    methods: {
        // input的 chang事件处理方法
        addFile ({ target: { files } }) { // input标签触发onchange事件时，将文件加入待上传列表
            for (let i = 0, l = files.length; i < l; i++) {
                files[i].url = URL.createObjectURL(files[i])// 创建blob地址，不然图片怎么展示？
                files[i].status = 'ready'// 开始想给文件一个字段表示上传进行的步骤的，后面好像也没去用......
            }
            let fileList = [...this.fileList]
            if (this.multiple) { // 多选时，文件全部压如列表末尾
                fileList = [...fileList, ...files]
                const l = fileList.length
                let limit = this.limit
                if (limit && typeof limit === 'number' && Math.ceil(limit) > 0 && l > limit) { // 有数目限制时，取后面limit个文件
                    limit = Math.ceil(limit)
                    // limit = limit > 10 ? 10 : limit;
                    fileList = fileList.slice(l - limit)
                }
            } else { // 单选时，只取最后一个文件。注意这里没写成fileList = files;是因为files本身就有多个元素（比如选择文件时一下子框了一堆）时，也只要一个
                fileList = [files[0]]
            }
            this.onChange(fileList)// 调用父组件方法，将列表缓存到上一级data中的fileList属性
        },
        // 移除某一个文件
        remove (index) {
            const fileList = [...this.fileList]
            if (fileList.length) {
                fileList.splice(index, 1)
                this.onChange(fileList)
            }
        },
        // 检测是否可以提交
        checkIfCanUpload () {
            console.log(this.fileList.length)
            return this.fileList.length ? ((this.onBefore && this.onBefore()) || !this.onBefore) : false
        },
        // 根据情况使用不同的提交的方法
        submit () {
            console.log('开始提交')
            if (this.checkIfCanUpload()) {
                // console.log('开始提交2')
                if (this.onProgress && typeof XMLHttpRequest !== 'undefined') {
                    this.xhrSubmit()
                } else {
                    this.fetchSubmit()
                }
            }
        },
        // fethc 提交
        fetchSubmit () {
            const keys = Object.keys(this.data); const values = Object.values(this.data); const action = this.action
            const promises = this.fileList.map(each => {
                each.status = 'uploading'
                const data = new FormData()
                data.append(this.name || 'file', each)
                keys.forEach((one, index) => data.append(one, values[index]))
                return fetch(action, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: data
                }).then(res => res.text()).then(res => JSON.parse(res))// 这里res.text()是根据返回值类型使用的，应该视情况而定
            })
            Promise.all(promises).then(resArray => { // 多线程同时开始，如果并发数有限制，可以使用同步的方式一个一个传，这里不再赘述。
                let success = 0; let failed = 0
                resArray.forEach((res, index) => {
                    if (res.code === 1) {
                        success++ // 统计上传成功的个数，由索引可以知道哪些成功了
                        this.onSuccess(index, res)
                    } else if (res.code === 520) { // 约定失败的返回值是520
                        failed++ // 统计上传失败的个数，由索引可以知道哪些失败了
                        this.onFailed(index, res)
                    }
                })
                return { success, failed } // 上传结束，将结果传递到下文
            }).then(this.onFinished) // 把上传总结果返回
        },
        // xhr 提交
        // xhrSubmit () {
        //     const _this = this
        //     const options = this.fileList.map((rawFile, index) => ({
        //         file: rawFile,
        //         data: _this.data,
        //         filename: _this.name || 'file',
        //         action: _this.action,
        //         headers: {
        //             Authorization: window.sessionStorage.getItem('token')
        //         },
        //         onProgress (e) {
        //             _this.onProgress(index, e)// 闭包，将index存住
        //         },
        //         onSuccess (res) {
        //             _this.onSuccess(index, res)
        //         },
        //         onError (err) {
        //             _this.onFailed(index, err)
        //         },
        //         onFinished (res) { // 这里补充一个配置
        //             _this.onFinished(res) //
        //         }
        //     }))
        //     const l = this.fileList.length
        //     const send = async options => {
        //         for (let i = 0; i < l; i++) {
        //             await _this.sendRequest(options[i])// 这里用了个异步方法，按次序执行this.sendRequest方法，参数为文件列表包装的每个对象，this.sendRequest下面紧接着介绍
        //         }
        //     }
        //     send(options)
        // },
        xhrSubmit () {
            const _this = this
            const options = {
                file: this.fileList,
                data: _this.data,
                filename: _this.name || 'file',
                action: _this.action,
                headers: {
                    Authorization: window.sessionStorage.getItem('token')
                },
                onProgress (e) {
                    _this.onProgress(1, e)// 闭包，将index存住
                },
                onSuccess (res) {
                    _this.onSuccess(1, res)
                },
                onError (err) {
                    _this.onFailed(1, err)
                },
                onFinished (res) { // 这里补充一个配置
                    _this.onFinished(res) //
                }
            }
            // this.fileList.map((rawFile, index) => ({
            //     file: rawFile,
            //     data: _this.data,
            //     filename: _this.name || 'file',
            //     action: _this.action,
            //     headers: {
            //         Authorization: window.sessionStorage.getItem('token')
            //     },
            //     onProgress (e) {
            //         _this.onProgress(index, e)// 闭包，将index存住
            //     },
            //     onSuccess (res) {
            //         _this.onSuccess(index, res)
            //     },
            //     onError (err) {
            //         _this.onFailed(index, err)
            //     },
            //     onFinished (res) { // 这里补充一个配置
            //         _this.onFinished(res) //
            //     }
            // }))
            console.log(options)
            _this.sendRequest(options)
            // const l = this.fileList.length
            // const send = async options => {
            //     for (let i = 0; i < l; i++) {
            //         await _this.sendRequest(options[i])// 这里用了个异步方法，按次序执行this.sendRequest方法，参数为文件列表包装的每个对象，this.sendRequest下面紧接着介绍
            //     }
            // }
            // send(options)
        },
        // 发起上传请求这里借鉴了element-ui的上传源码
        sendRequest (option) {
            // const _this = this
            upload(option)
            function getError (action, option, xhr) {
                // eslint-disable-next-line no-void
                var msg = void 0
                if (xhr.response) {
                    msg = xhr.status + ' ' + (xhr.response.error || xhr.response)
                } else if (xhr.responseText) {
                    msg = xhr.status + ' ' + xhr.responseText
                } else {
                    msg = 'fail to post ' + action + ' ' + xhr.status
                }
                var err = new Error(msg)
                err.status = xhr.status
                err.method = 'post'
                err.url = action
                return err
            }

            function getBody (xhr) {
                var text = xhr.responseText || xhr.response
                if (!text) {
                    return text
                }

                try {
                    return JSON.parse(text)
                } catch (e) {
                    return text
                }
            }

            function upload (option) {
                if (typeof XMLHttpRequest === 'undefined') {
                    return
                }

                var xhr = new XMLHttpRequest()
                var action = option.action

                if (xhr.upload) {
                    xhr.upload.onprogress = function progress (e) {
                        if (e.total > 0) {
                            e.percent = e.loaded / e.total * 100
                        }
                        option.onProgress(e)
                    }
                }
                var formData = new FormData()

                if (option.data) {
                    Object.keys(option.data).map(function (key) {
                        formData.append(key, option.data[key])
                    })
                }

                option.file.forEach(item => {
                    formData.append(option.filename, item)
                })
                // formData.append(option.filename, option.file)

                xhr.onerror = function error (e) {
                    option.onError(e)
                }

                xhr.onload = function onload () {
                    if (xhr.status < 200 || xhr.status >= 300) {
                        return option.onError(getError(action, option, xhr))
                    }

                    option.onSuccess(getBody(xhr))
                }

                xhr.open('post', action, true)

                if (option.withCredentials && 'withCredentials' in xhr) {
                    xhr.withCredentials = true
                }

                var headers = option.headers || {}

                for (var item in headers) {
                    // eslint-disable-next-line no-prototype-builtins
                    if (headers.hasOwnProperty(item) && headers[item] !== null) {
                        xhr.setRequestHeader(item, headers[item])
                    }
                }
                xhr.send(formData)
                return xhr
            }
        }
    }
}
</script>
<style lang="less" scoped>
</style>

2 父组件使用

<template>
    <div id="upload_works">
        <div class="type_info" >
            <div class="info">支持JPG，PNG，GIF格式，大小不超过20M</div>
            <!-- 自己封装的手动上传文件的组件 -->
            <digital-upload
                accept="image/*"
                ref="myUpload"
                action="/api/production/uploadImgList"
                name="files"
                id="my-upload"
                multiple
                :limit="10"
                :file-list="fileList"
                :data="param"
                :on-change="onChange"
                :on-progress="uploadProgress"
                :on-success="uploadSuccess"
                :on-failed="uploadFailed"
                :on-finished="onFinished"
            >
                <div class="normal_button">上传文件</div>
            </digital-upload>
            <div class="three">或拖放到这里</div>
        </div>
    </div>
</template>

<script>
import digitalUpload from '@/digitalComponents/upload/digitalUpload.vue'
export default {
    data () {
        return {
            fileList: [],
            param: { id: null }
        }
    },
    methods: {
        onChange (fileList) { // 监听文件变化，增减文件时都会被子组件调用
            console.log(fileList)
            this.fileList = [...fileList]
        },
        uploadSuccess (index, response) { // 某个文件上传成功都会执行该方法，index代表列表中第index个文件
            console.log('图片上传成功')
            console.log(index, response)
            this.submitWorksCover()
        },
        upload () { // 触发子组件的上传方法
            this.$refs.myUpload.submit()
        },
        removeFile (index) { // 移除某文件
            this.$refs.myUpload.remove(index)
        },
        uploadProgress (index, progress) { // 上传进度，上传时会不断被触发，需要进度指示时会很有用
            const { percent } = progress
            console.log(index, percent)
        },
        uploadFailed (index, err) { // 某文件上传失败会执行，index代表列表中第index个文件
            console.log(index, err)
        },
        onFinished (result) { // 所有文件上传完毕后（无论成败）执行，result: { success: 成功数目, failed: 失败数目 }
            console.log(result)
        }
    },
    components: {
        digitalUpload
    }
}
</script>
<style lang="less" scoped>
</style>

3.效果

4.总结

前端项目如果不是中台项目，自己封装组件是非常有比较的，这里比较麻烦的地方是 父组件引用需要些大量的方法，您也可以再封

到此这篇关于 封装一个Vue文件上传组件案例详情的文章就介绍到这了,更多相关Vue 封装文件上传组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！