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>
)
}