antd vue表单上传文件_使用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;

},

不过写那么多代码毕竟麻烦，示例中有一个上传头像的例子，正好拿来套用。

以下是简单修改后封闭成的一个组件：

name="file"

list-type="picture-card"

class="image-uploader"