Skip to content

Conversation

@Miles-hxy
Copy link

用于测试Uploader组件上传功能的服务端接口。
启动服务(上传的图片将保存在uploads文件夹)

cd v3/uploader-server
node index.js

组件使用demo:

import React, { useState } from 'react'
import { Uploader, Cell, FileItem, Space } from '@nutui/nutui-react'
import axios from 'axios'

const Demo1 = () => {
  const [list, setList] = useState<FileItem[]>([])

  async function upload(file: File) {
    const formData = new FormData()
    formData.append('file', file)

    const response = await axios.post(
      'http://localhost:3000/upload',
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }
    )
    console.log(response.data.url)
    return { url: response.data.url }
  }

  return (
    <>
      <Cell style={{ flexWrap: 'wrap' }}>
        <Space wrap>
          <Uploader
            uploadLabel="商品主图"
            value={list}
            onChange={setList}
            upload={(file: File) => upload(file)}
          />
          <Uploader upload={(file: File) => upload(file)} />
        </Space>
      </Cell>
    </>
  )
}
export default Demo1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant