React (1702H) File upload and paging lookup

1. Upload

Dom:

            <div className="m-upload-input-wrap">
              <input type="file" value="" onChange={this.handleUpload.bind(this)}/>
            </div>
Copy the code

Interface:

  handleUpload(e) {
    const data = new FormData();
    data.append('file', e.target.files[0]);
    const params = `/upload`
    axios({
        method: 'post'.data: data, 
        url: params,
        timeout: 1000 * 60 * 60 * 8
      })
      .then((res) = > {
        console.log(res)      
        this.getUploadList()     
      })
      .catch((err) = > {
        console.log(err)          
      })
  },
Copy the code

2. Display table (antD table)

Dom:

            <div>
              <Table 
                columns={columns} 
                dataSource={list} 
                rowKey="uid"
                pagination={ total >10? { total: total, current: current, pageSize: 10, onChange: this.handlePage.bind(this) } : false}></Table>
            </div>
Copy the code

columns:

  renderColumns () {
    return[{title: 'images'.dataIndex: 'path'.render: (text, record, index) = > {
          return <span><img src={text} className="m-upload-img"></img></span>}}, {title: 'File name'.dataIndex: 'originalname'.key: 'originalname'}, {title: 'operation'.render: (text, record, index) = > {
          return <div>
            <Button onClick={this.handleCopy.bind(this, record)} >Copy the link</Button>
          </div>}}},Copy the code

Get the list:

  getUploadList() {
    Api.getUploadList(`? page=1&size=10`).then((res) = > {
      console.log(res)
      if (res.code === keyCode.SUCCESS) {
        this.setState({
          list: res.data.list,
          current: 1.total: res.data.total
        })
      }
    })
  },
Copy the code

Page:

  handlePage(current) {
    Api.getUploadList(`? page=${current}&size=10`).then((res) = > {
      console.log(res)
      if (res.code === keyCode.SUCCESS) {
        this.setState({
          list: res.data.list,
          current: current,
          total: res.data.total
        })
      }
    })    
  }
Copy the code

3. Back-end interfaces

NPM packages used:

const multer = require('multer')
Copy the code

Configuration:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // The path to save the output of the received file (if it does not exist, it needs to be created)
    cb(null.'public/images/');
  },
  filename: function (req, file, cb) {
    // Set the save file name to timestamp + the original file name, such as 151342376785-123.jpg
    cb(null.Date.now() + "-"+ file.originalname); }});var upload = multer({ storage: storage });
Copy the code

Refer to the link: www.npmjs.com/package/mul…

Upload interface:

// File upload
app.post('/upload', upload.single('file'), async function (req, res, next) {
  var file = req.file;
  console.log('File type: %s', file.mimetype);
  console.log('Original file name: %s', file.originalname);
  console.log('File size: %s', file.size);
  console.log('File save path: %s', file.path);
  console.log(file)
  let uid = getID(10)
  let createTime = new Date().getTime()
  const data = await uploadAdd(
    uid,
    `http://localhost:8888/images/${file.filename}`,
    file.originalname,
    createTime)
  if (data) {
    res.send(({
      code: 200.data: file,
      message: 'Upload successful'}}))else {
    res.send(({
      code: 400.data: file,
      message: 'Upload failed'}}})))Copy the code

Paging lookup:

// Get the upload list
app.get('/upload/list'.async function (req, res) {
  let { page, size } = req.query
  start = (page - 1) * size
  const data = await getUploadList(start, size)
  console.log(data)
  let token = req.headers['token']
  let auth = getTokenAuth(token)
  if (auth) {
    res.send(({
      code: 200.data: data,
      message: 'Uploaded File List'}}))else {
    deleteTokenHistory(token)
    res.send(({
      code: 403.message: 'No permissions'}}})))Copy the code

SQL > create table;

DROP TABLE IF EXISTS `upload`;
CREATE TABLE `upload` (
  `uid` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT 'ID',
  `path` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT 'path',
	`originalname` varchar(1000) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT 'Original file name',
  `create_time` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT 'Creation time'.PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Copy the code