AntDesign結合mockjs隨機生成圖片

首先在七牛雲存儲必定數量的mock圖片,好比筆者存儲了近千張,方便接下來在代碼中使用。
圖片的來源能夠經過爬取諸如https://unsplash.it/400/800/?random等網站實現,在此不贅述。
核心步驟就是將圖片以數字(如1-1000)爲文件名存儲到七牛雲,而後就能夠在代碼中經過隨機int訪問了。
再結合Ant Design的API,構造upload組件的Mock數據fileList以下:javascript

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',
      }],
    },
  ],
})

效果以下:java

clipboard.png

clipboard.png

相關文章
相關標籤/搜索