Vue

Vue 中上传文件到七牛带进度提示

本文将介绍对文件上传的一种封装方式仅供参考用于解决七牛图片上传进度问题(以图片上传为例)。

上传组件

创建 upload.vue 文件,接收一个 File 类型的 Props 数据,在 mounted 生命周期函数中触发上传操作。

<template>
</template>
<script>
    import * as qiniu from 'qiniu-js';
    import Network from './network';
    export default {
        name: "upload",
        data(){
            return {};
        },
        props:{
            file: {
                type:File
            },
        },
        mounted(){
            this.uploader();
        },
        methods:{
            uploader() {
                Network.getToken().then(res => {
                    //此处是七牛上传操作
                    let observable = qiniu.upload(this.file, this.createKey(this.file), res.token);
                    let subscription = observable.subscribe(this.next, this.error, this.complete);
                }).catch(err => {
                    console.log('获取 Token 失败', err);
                });
            },
            next(res) {
                /*图片上传进度*/
                this.$emit('next', res);
            },
            error(err) {
                /*图片上传失败*/
                this.$emit('error', err);
            },
            complete(res) {
                /*图片上传完成*/
                res.url = 'https://domain.com/' + res.key;
                this.$emit('complete', res);
            },
            createKey() {
                //创建 Date 对象
                let d = new Date();
                //分解文件名称
                let types = this.file.name.split('.');
                //返回拼接完成的新文件名称
                return d.getYear() + d.getMonth() + d.getDay() + d.getDate() + d.valueOf()+ '.' + types[types.length - 1];
            },
        }
    }
</script>

图片组件

创建 image.vue 接收一个 File 类型的 Props 数据。

<template>
    <img :src="localUrl">
    <x-upload :file="file" @complete="complete" @next="next" @error="error"></x-upload>
</template>
<script>
    import XUpload from './upload';
    export default {
        name:"Ximage",
        components:{
            XUpload
        }
        data(){
            return {
                localUrl:'',
                remoteUrl:'',
                percent:0,
                uploadSuccess:false
            };
        },
        props:{
            file:{
                type:File
            }
        },
        methods:{
            complete(res){
                //图片上传完成操作,
                console.log('当前图片上传完成',res);
                res.file = this.file;
                this.remoteUrl = res.url;
                this.$emit('complete', res);
            },
            next(res){
                //图片上传进度
                console.log('当前图片上传进度为',res.total.percent);
            },
            error(res){
                //图片上传失败
                console.log('当前图片上传失败',res);
            },
            createLocalUrl(file){
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = (e) => {
                    this.localUrl = e.currentTarget.result;
                }
            }
        },
        mounted(){
            //base64 转码用于展示图片
            this.createLocalUrl(this.file);
        },
        watch:{
            file(n,o){
                //此处主要用于调用时 Props 数据更新后重新 进行base64转码让展示图片更新
                this.createLocalUrl(n);
            },
        }
    }
</script>

OK! 此时我们可以使用 图片 组件了

调用示例

创建 test.vue 文件

<template>
    <div v-for="file in files">
        <x-image :file="file" @complete="complete"></x-image>
    </div>
    <input type="file" accept="image/*" name="selectImages" multiple @change="selectImage($event)">
</template>
<script>
    import XImage from './image';
    export default {
        name:"test",
        data(){
            return {
                files:[];
            }
        },
        methods:{
            selectImage(e){
                this.files =  Array.from(el.target.files);
            },
            complete(res){
                console.log('图片上传完成', res);
            }
        }
    }
</script>

小结

本文主要用于解决七牛文件上传仅支持单文件上传需要上传进度提示时对组件进行封装使其方便调用。

声明

本文源代码仅供参考请勿用于生产环境。
本文原创,转载请注明出处。

发表评论