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

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 width="100%" :src="imagePreviewUrl" alt="">

</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，没有其他属性，比如文件大小，涉及到其他属性的函数都没办法调用）