el-upload使用http-request实现图片上传，回显，放大效果

        在项目开发中，为了实现上传文件的功能，我们需要用到el-upload这个组件，为了实现回显放大效果，就要用到el-image这个组件了。官方文档中介绍了上传的两种方法，一个是使用action，其参数必须要上传的地址；另一个是http-request，该方法覆盖默认的上传行为，可以自定义上传的实现。下面阐述如何实现图片上传，回显，放大效果。

官方文档：Element - The world's most popular Vue UI framework

el-upload组件相关api介绍：

上传图片有以下这些几种方式，开发者可以根据项目实际情况进行选择。

• 传入自定义的上传按钮类型和文字提示

  点击上传
  
只能上传jpg/png文件，且不超过500kb

• 照片墙，可以回显图片

代码如下：

• 可以对图片进行拖拽

代码如下：

  
  
将文件拖到此处，或点击上传
  
只能上传jpg/png文件，且不超过500kb

 通过以上介绍我们已经初步了解了el-upload的用法，下面我们来看图片上传回显放大的实现过程。代码如下：

      上传图片
      

        

          
          

            
              

                {{
                  file.name.length > 10
                    ? file.name.slice(0, 10) + "..."
                    : file.name
                }}
              
          
          

            
          
        
      
    

methods: {
      //fileList存放上传的图片 file是对象
      handler(file) {
        this.fileList = [file];
      },
      // 校验上传的文件数量是否超出限制
      onExceed() {
        this.$message.error(`只能上传${this.limit}张图片！`);
      },
      // 移除图片时清空
      remove(file) {
        this.$refs.upload.clearFiles();
      },
      // 上传前校验图片格式
      beforeAvatarUpload(file) {
        const isType = ["image/jpg", "image/png", "image/jpeg"].includes(
          file.type
        );
        if (!isType) {
          this.$message({
            message: "只能上传格式为PNG,JPG,JPEG的图片！",
            type: "warning",
          });
        }
        return isType;
      },
      // 图片名字过长处理
      inputOnMouseOver(name) {
        if (name.length < 10) {
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      },
    },

效果如下，点击图片可以实现放大效果：