vue2.x，element-ui 中上传图片组件（图片查看，已有图片渲染）

Posted 2023-03-03

参考技术A

1、基本标签结构

<el-upload name="picture" 

            :action="\'/api/image/upload?imageType=xxx" 

            accept=".jpg, .png"      

            list-type="picture-card" 

           :limit="1"    

           :file-list="filelists"

            :on-exceed="onExceed" 

            :before-upload="beforeUpload"  

            :on-preview="handlePictureCardPreview"      

            :on-success="imagesuccess"   

            :on-remove="handleRemove">

            <i class="el-icon-plus"></i>  

 </el-upload>

<!--预览-->

<el-dialog :visible.sync="imgPreviewVisible" size="full" :modal="false" title="预览">

                <img :src="imagePreviewUrl" >

</el-dialog>

方法示例：

onExceed(files, fileList)  

                this.$message(

                        type: \'info\',

                        message: \'最多只能上传一个图片\',  

                        duration: 6000

                );

,

beforeUpload(file)

                const isJPG = file.type === \'image/jpeg\';  

                const isGIF = file.type === \'image/gif\';  

                const isPNG = file.type === \'image/png\';

                const isBMP = file.type === \'image/bmp\'; 

                const imgSizeLimit= file.size  < 1*1024*1024;

                if (!isJPG && !isGIF && !isPNG && !isBMP)

                     this.$message.error(\'上传图片必须是JPG/GIF/PNG/BMP 格式!\'); 

               

                if (!imgSizeLimit)  

                        this.$message.error(\'上传图片大小不能超过 1MB!\');

               

                return (isJPG || isBMP || isGIF || isPNG) && imgSizeLimit;                                                                                                                           , 

handlePictureCardPreview:function(file)

        //todo

 ,

imagesuccess:function(response, file, fileList)

         //todo

         this.filelists  = [];

          this.filelists  = [file]

 ,

handleRemove:function(file, fileList)

           //todo

 ,

2、action为后台上传图片接口

      file-list为文件列表

      limit为设置的可上传文件的最大个数

      onExceed上传的文件个数超出设定时触发的函数，参数为上传的文件file和文件列表 filelists  

      beforeUpload文件上传前执行，参数为上传的文件file，如果返回false或者返回Primary且被reject，则停止上传

      handlePictureCardPreview图片预览时触发，参数为上传的文件file，

      imagesuccess图片上传成功时触发参数response, file, filelists  

      handleRemove移除图片时触发，参数为file, filelists  

3、已有图片渲染问题：

自己在实际开发过程中，会遇到编辑情况，并且已经存在一张图片，想要放到图片组件中，可以调用组件里声明的方法。

由于是新手，组件使用不熟练，所以我将图片的显示与上传等操作分离，单独自己去展示，上传时再使用组件上传，使用组件的:show-file-list="false"属性来隐藏组件自带的图片展示功能。

后来发现自己可以自己初始化filelists列表，来使已存在的图片文件放入组件中，放入的对象当然时文件，但是我后台只有图片地址，如何拼出一个file格式对象来呢？通过debug，我发现上传的文件格式对象有好多属性，当然，存在url这个属性就可以通过组件进行展示。最简单的一种方式就是直接创建一个只有一个url属性的对象var file =     url:this.showDetailForm.profilePhotoPath        this.filelists.push(file)  然后push到文件列表，就可以在组件中进行渲染，对图片的操作可以使用声明的方法+表单属性来实现业务的全过程（当然，这样渲染的文件只有url，没有其他属性，比如文件大小，涉及到其他属性的函数都没办法调用）