[JavaScript知识库]react +antd-mobile图片上传插件（ImageUploader，支持七牛云直传）

快速上手

安装

$ npm install --save antd-mobile

# or

$ yarn add antd-mobile

# or

$ pnpm add antd-mobile

引入

直接引入组件即可，antd-mobile 会自动为你加载 css 样式文件：

import { Button } from 'antd-mobile'

如果你开发的是阿里/蚂蚁内部项目，那么请额外阅读一下这篇指引

。

如果你使用的是 umi 框架，那么推荐阅读一下常见问题中的 "umi 项目安装 antd-mobile v5 后报错如何解决？"。

兼容性

我们建议在项目中增加下面的 babel 配置，这样可以达到最大兼容性，为 iOS Safari >= 10 和 Chrome >= 49：

{

"presets": [

[

"@babel/preset-env",

{

"targets": {

"chrome": "49",

"ios": "10"

}

}

]

]

}

不要把 node_modules 排除在 babel 编译之外，不然上面的配置不会有效果

对于 TypeScript，我们兼容的版本是 >= 3.8。

对于 React，我们兼容的版本是 ^16.8.0 ^17.0.0 ^18.0.0。

由于 iOS 9 并不支持 CSS 变量，因此如果你需要支持 iOS 9，请参考 这篇文档 启用 CSS 变量自动降级，并且将 babel 配置中的 target ios 设置为 9。

http://ant-design-mobile.antgroup.com/zh/components/image-uploader

import React, { useState } from 'react'
import { ImageUploader, Dialog } from 'antd-mobile'
import { v4 as uuidv4 } from 'uuid'
import {
  imageUrlFormat,
  uploadImgGetTokenFromLocalStorage,
  uploadGetTokenFromLocalStorageForH5,
} from '../../utils/tools'
import urls from '../../api/urls'
import axios from 'axios'

export default function UploadImgToCND({
  value = '',
  msg,
  type = 'add',
  onChange,
  accept = '.jpg,.png,.jpeg',
  imgUrlCnd,
  imgDir = 'img',
  filePrefix = '',
  uploadType = 1,
}) {
  const imageUrl = imageUrlFormat(imgUrlCnd)
  let defaultValue = {
    uid: '-1',
    name: imageUrl,
    status: 'done',
    url: imageUrl,
  }
  const [fileList, setFileList] = useState(value ? [defaultValue] : [])

  const mockUpload = async (file) => {
    const uid = uuidv4()
    const reslutIndex = Array.from(file.name).findLastIndex(
      (item) => item === '.'
    )
    const fileName = uid + file.name.slice(reslutIndex, file.name.length)
    let token
    if (uploadType === 1) {
      token = uploadImgGetTokenFromLocalStorage()
    } else if (uploadType === 2) {
      token = uploadGetTokenFromLocalStorageForH5()
    } else {
      token = uploadImgGetTokenFromLocalStorage()
    }
    const data = new FormData()
    data.append('file', file)
    data.append(
      'key',
      `${imgDir}/${filePrefix ? filePrefix + '-' : ''}${fileName}`
    )
    data.append('fname', fileName)
    data.append('token', token)
    await axios({
      url: urls.light.uploadToCDN,
      method: 'post',
      data,
    }).then((res) => {
      if (res.data.code === 200) {
        typeof onChange === 'function' && onChange(res.data.data.key)
      }
    })

    return {
      url: URL.createObjectURL(file),
    }
  }

  return (
    <span>
      {type !== 'check' ? (
        <ImageUploader
          value={fileList}
          onChange={(info) => {
            if (Array.isArray(info) && info.length === 0) {
              typeof onChange === 'function' && onChange(undefined)
            }
            console.log(info)
            setFileList(info)
          }}
          upload={mockUpload}
          maxCount={1}
          onDelete={() => {
            return Dialog.confirm({
              content: '是否确认删除',
            })
          }}
        />
      ) : value ? (
        <img src={imageUrl} alt={imageUrl} className="m-upload-img-check"></img>
      ) : null}
    </span>
  )
}