vue+element封装公共上传图片组件

1.先定义一个上传图片的子组件

 <el-upload
      class="avatar-uploader upload"
      :action="imgurl()"                    //  必须  接口地址
      list-type="picture-card"             //格式为图片
      :show-file-list="false"              //是否显示已上传文件列表
      :on-success="handleSuccess"          //上传成功
      :before-upload="beforeAvatarUpload"  //上传成功之前
      :headers="headers"                   //必须获取token
    >
      <img v-if="imagesUrl" :src="imagesUrl" class="avatar" />  //显示上传的图片
      <img v-else :src="src" style="width:160px" />             //没有图片时默认显示的图片
    </el-upload>

2.在子组件中 定义一个props 接收父组件传过来的值

  props: {
            value:{}
        },

3.使用watch监听 一进入子组件就监听传过来的value值

watch:{
            value:{
                immediate:true,   
                handler:function(value){
                    if(!value){
                        this.fileList=[];
                        this.imagesUrl="";
                        return;
                    }
                    this.imagesUrl=value;
                }
            },
        },

4.子组件data中的数据 与上传图片的方法

 data() {
            return {token: getToken(), dialogVisible: false,imagesUrl:"",src:""}
        },
        computed: {
            headers() {
                return {
                    "access-token": this.token // 直接从本地获取token就行
                };
            },
         methods: {
         //获取接口地址
            imgurl() {
                return axios.defaults.baseURL + "/sssss/ssss"; //接口地址
            },
			//上传成功
            handleSuccess(res, file) {
                this.imagesUrl=res.data;
                //图片路径返回给父组件
                this.$emit("input",this.imagesUrl)          
            },
            // 上传成功之前 对图片格式要求
            beforeAvatarUpload(file) {
                const isPNG = file.type === "image/png";
                const isJPG = file.type === "image/jpeg";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isPNG && !isJPG) {
                    this.$message.error("上传图片只能是 JPG 格式和PNG格式!");
                }
                if (!isLt2M) {
                    this.$message.error("上传图片大小不能超过 2MB!");
                }
                return (isPNG&& isLt2M) || (isJPG && isLt2M);
            }
        }

5.父组件使用 子组件在全局挂载了所以不需在引入 注册了 直接使用即可 此处v-model表示传到子组件的图片地址

<f-single-image-upload v-model="detailsInfoData.businessLicense"></f-single-image-upload>

6.最后就封装完成了公共的上传图片组件 可以在需要的地方使用了

最后

以上就是昏睡过客为你收集整理的vue+element封装公共上传图片组件的全部内容，希望文章能够帮你解决vue+element封装公共上传图片组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。