使用antd for vue简单封装单图片上传组件

近来在尝试使用antd做后台管理系统的开发,其中一个场景需要上传单张图片,antd的上传组件默认大多都是多张上传的,当然可以按示例的方法,使用代码控制上传列表的数量

handleChange(info) {
      let fileList = [...info.fileList];

      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2);

      // 2. read from response and show file link
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });

      this.fileList = fileList;
    },

不过写那么多代码毕竟麻烦,示例中有一个上传头像的例子,正好拿来套用。
以下是简单修改后封闭成的一个组件:






调用示例:


你可能感兴趣的:(使用antd for vue简单封装单图片上传组件)