VUE 图片上传组件

工作中遇到的需求 和大家分享下

• 以下代码演示完成图片上传组件
• 注意 使用VUE1框架 VUE2 已经废弃 DISPATCH

主要用到以下特性

原始地址

1. 上传组件 upload.vue

html

    <div class="imgBox" v-bdstyle="compentstyle"> 
        ![](info.filePath)
    </div>


    <div class="btnBox">
        <input type="file"  class="hidden" v-bindimgid="compentid" @change="sendFile">
        <div class="btn" @click="checkFile" >上传</div> 
        <div class="perBar" v-binduploadper="picUploadPer"></div>
    </div>

js

import { fileImage } from "../js/picUpload.js"  // 上传接口

export default {
    props:['compentstyle','compentid'],  //  父组件中 传递给图片上传组件的样式和ID  ID为了出来一个页面需要多个上传情况
    data(){
        return {
            info: {  //服务器返回的图片信息    需要自己修改
                imgName:'',
                imgPath:'./pic.jpg',  // 默认图    需要自己修改
                imgPreviewPath:''
            },
            picUploadPer:"",//进度条
            isFinish:false,
        }
    },
    watch:{
        'info':function(now,old){   //监听info 当图片信息更新时 子组件像父组件发送自定义事件
            
        }
    },
    computed:{
    
    },
    methods:{
        checkFile(){
            //let DOM = 
            let DOM = 
            DOM.click()
        },
        sendFile(e){  //头像

            this.picUploadPer = ''
            this.isFinish = false


            let image = e.target,
                 file = image.files[0]

            this.fileInfo(file)  //获取上传图片的本地信息
            this.uploadImg(file) //进行上传

        },
        postImagePath(imgObj){   //通过对 this.info 的监听 获得服务器返回信息后 才像父组件派发
            this.$dispatch('imgFormChild',imgObj)
        },        
        fileInfo(file){
            this.fileName = file.name
            this.fileSize = parseInt(file.size / 1000) + "KB"
        },
        uploadImg(file){

            let _this = this

            function getData(data){
                let img = data.files[0]
                    _this.info = img
            }

            function getPer(per){
                _this.picUploadPer = per
                _this.isFinish =  per == "100" ?  true : false
            }

            fileImage(file,getData,getPer)
        }
    },
    ready(){
        
    }
}

2. 父页面引用方法

html

    <imgupload :compentstyle="imgStyle0" :compentid="fileComponents[0]"> </imgupload>
    <imgupload :compentstyle="imgStyle1" :compentid="fileComponents[1]"> </imgupload>
    <imgupload :compentstyle="imgStyle2" :compentid="fileComponents[2]"> </imgupload>

js

  import imgupload from '../componets/upload.vue'  //引入组件

  export default{
    data () {
        return {
            fileComponents:['file0','flie1','file2'],  //为组件传入三个ID
            imgStyle0:{  // 组件样式
                width:'100px',
                height:'100px',
                backgroundColor: '#eee'
            },
           imgStyle1:{
                width:'150px',
                height:'150px',
                backgroundColor: '#eee'
            },
           imgStyle2:{
                width:'200px',
                height:'200px',
                backgroundColor: '#eee'
            },
            imgAll:{}  // 
            /**
                imgAll.file0{}
                imgAll.file1{}
                imgAll.file2{}
            */

        }
    },
    components:{
        imgupload  //使用前声明
    },
    events:{  // 此处接收子组件派发的事件
        'imgFormChild':function(obj,id){
            this.imgAll[id]=obj
            console.log('info parent:',JSON.stringify(this.imgAll))
        }
    },
    methods:{

    },
    ready(){

    }

}

3. 自定义指令

directive.js

    export const imgUploadObj = {
        update(val) {
            this.el.id = val
            console.log('bind id', this.el.id)
        }
    }

    export const imgUploadPer = {
        update(val) {
            let domStyle = this.el.style
            domStyle.width = val + 'px'
            domStyle.backgroundColor = `#0${val*2.55}0px`
       }
    }

    export const style = {
       update(val) {
            let domStyle = this.el.style
            for (let key in val) {
                domStyle[key] = val[key]
            }
        }
    }    

main.js

    import { imgUploadObj, imgUploadPer, style } from './directive'

    Vue.directive('bindimgid', imgUploadObj) // 自定义指令
    Vue.directive('binduploadper', imgUploadPer) // 自定义指令

    Vue.directive('bdstyle', style) // 自定义指令