首先在七牛云存储一定数量的mock图片,比如笔者存储了近千张,方便接下来在代码中使用。
图片的来源可以通过爬取诸如https://unsplash.it/400/800/?random
等网站实现,在此不赘述。
核心步骤就是将图片以数字(如1-1000)为文件名存储到七牛云,然后就可以在代码中通过随机int访问了。
再结合Ant Design的API,构造upload组件的Mock数据fileList如下:
const Mock = require('mockjs')
let data = Mock.mock({
'data|4-8': [
{
id: '@id',
title: '@title',
namespace: 'desctab',
content: '@paragraph',
isPublish: '@boolean',
createTime: '@datetime',
'fileList|1-10': [{
name: '@integer(1,960)',
uid: '-@name',
url: 'http://xxxxx.xxx.clouddn.com/@name',
status: 'done',
}],
},
],
})
效果如下:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。