AntDesign结合mockjs随机生成图片

首先在七牛云存储一定数量的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',
      }],
    },
  ],
})

效果如下:

clipboard.png

clipboard.png

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值