Vant图片上传组件封装

最新推荐文章于 2024-05-28 16:44:04 发布

爱睡觉的程序员_

最新推荐文章于 2024-05-28 16:44:04 发布

阅读量1.4k

点赞数

分类专栏： vant 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42908510/article/details/123530895

版权

vant 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父组件：

import  UploadImg  from '@/components/UploadImg.vue';

data() {
return {

enterpriseList:[]; //接收子组件传过来的值

enterpriseisload :true;// 是否显示上传组件

enterprisedelectimg : true; //是否可以删除

enterprisename : 'enterprisename'; //上传组件的名称

Multiple:true;//是否多图上传

}
},

<UploadImg
        :extantFiles="enterpriseList"
        :showupload="enterpriseisload"
        :isdelect="enterprisedelectimg"
        :uploadName = 'enterprisename'
        :multiple = 'Multiple'
        :maxLen = '12'
        @change="enterpriseChange"

></UploadImg>

子组件：

//图片上传之前校验类型

        this.count = this.extant.length;
        // 校验图片上传的格式
        let fileType='';
        if(file instanceof Array && file.length){
        for (let i = 0; i < file.length; i++) {
          fileType=file[i].type.substr(0,file[i].type.indexOf('/'));
          if (fileType !== 'image') {
            Toast('格式错误');
            return false;
          }
         }
      }else{
         fileType=file.type.substr(0,file.type.indexOf('/'));
         if (fileType!== 'image') {
         Toast('格式错误');
         return false;
      }
      }
        return true;

           },
           afterRead (file) {

               this.imgList = []
               if (Array.isArray(file)) {
                   // 多图
                   this.imgList = file
                   // this.$emit('imgList', this.imgList)
                   this.imgList.forEach((item, index) => {
                           item.loading = false
                   }) // 为了校验图片是否上传成功
                   for (let index = 0; index < file.length; index++) {
                           this.postImg(file[index], this.count+index,index)
                   }

               } else {
                   // 单图
                   this.imgList.push(file)
                   this.imgList.forEach((item, index) => {
                           item.loading = false
                   }) // 为了校验图片是否上传成功
                   // this.$emit('imgList', this.imgList)
                   // let index = 0
                   this.postImg(file, this.count,0)
               }
           },
           postImg (file, index,item) {
               console.log('传之后',index,this.extant.length)

               var that = this;
           file.status = 'uploading'
           file.message = '上传中...'

           this.$api.process.upload({
               file: file.content
           }).then(res => {
           // 你的上传请求

                       if(res){

                           that.extant[index].href = res
                           that.extant[index].url = res；（这个可以是域名拼接的链接）

                           that.imgList[item].loading = true;
                           if (that.imgList.length > 0) {
                               file.status = ''
                               file.message = ''

                           }

                       }

           }).catch(err => {

           console.log('err', err)
           file.status = 'failed'
           file.message = '上传失败'
                   for(var i=0;i<this.extant.length;i++){
                       if (this.extant[i].file.path === file.file.path) {
                       this.extant.splice(i, 1) // 上传失败后清除正在上传的图片
                       }
                   }

           })
           },
               deleteImgList (file) {

                   for(var i=0;i<this.extant.length;i++){
                       if (this.extant[i].url === file.url) {
                           this.extant.splice(i, 1)
                       }
                   }

               },

               getlist (val) {
                   // console.log('我是监听',val)
                   var list = []
                   for (let i = 0; i < val.length; i++) {
                       // this.extant[i].url = this.extant[i].fileUrl
                       list.push({

                  url:val[i].url,
                  href:val[i].href,
                  title:'',
                  isImage: true（加上这个解决图片不显示的问题）
                        })
                     }
                     // this.$emit('update:extantFiles', list)
                     this.$emit('change', list)
                },
        //从父组件拿需要渲染的图片列表
        showlist(val){
                var newslist = val;//传进来图片值
                var oldlist = this.extant;//当前页面的图片值
                 if(newslist.length!=oldlist.length){
                        this.extant = val
                        
                   }else{
                        // 长度相等且不为空
                        var iscommon = true;
                        // console.log('监听过来的',this.extant)
                        // console.log('监听2222',val)
                        if(this.extant.length>0){
                            for(var i=0;i<this.extant.length;i++){
                                if((val[i].url != this.extant[i].url) && val[i].url && this.extant[i].url){
                                    // console.log('qqqq',val[i].url)
                                    // console.log('ooooo',this.extant[i])
                                    iscommon = false
                                    break;
                                }
                            }
                            
                            if(!iscommon){
                                this.extant = val
                                
                            }
                        }
                        
                        
                        
                    }
                
                    
                    
                    
                    
                }
                
            
        }
    }
</script>