快速上手

安装

$ 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 tokenif (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' ? (<ImageUploadervalue={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>)
}

react +antd-mobile图片上传插件（ImageUploader，支持七牛云直传）相关推荐

react+antd实现图片上传并且剪裁（请参照最新文章，此案例有bug）
代码详情 (存在的bug:只有第一次上传剪裁是正确的,在不刷新页面的情况下再次进行剪裁会出现错误,目前没有找到解决办法.) 解决办法:点击上传按钮完成上传之后,按钮变为不能点击的状态,阻止bug的发生 ...
think php上传图片,基于ThinkPHP5.0实现图片上传插件
这篇文章主要介绍了关于基于ThinkPHP5.0实现图片上传插件,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪 ...
WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
jquery.photoClip.js图片上传插件带拖动裁剪
下载地址 jquery.photoClip.js是一款图片上传插件,可以拖动选择裁剪的区域. dd:
php 上传图片控件,ThinkPHP5.0实现图片上传插件实例分享
thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪图片后会删除裁剪的原图片目录,以便减少空间.具体实现代码大家参考下本文,希望能帮助到大家. 效果预览图: 该插件主要功能是:可 ...
java 图片上传控件_Javashop 图片上传插件使用指南
一.概述 Javashop 图片上传插件是一款基于WebUploader插件所封装的上传图片插件. 可用于快速生成上传图片页面,有如下特点: 基于freemarker指令模式所编写,只需一个指令,并且 ...
JavaScript头像图片上传插件支持上传类型大小尺寸验证
一行代码实现头像上传,图片大小.尺寸,类型验证 html调用 <img src="这里放默认头像" id="preview" onclick=" ...
react antv实现图片上传预览
1.引入import {Upload} from 'antd'全局引入样式:import 'antd/dist/antd.css'2.使用<Uploadname="上传名称,和后台约定 ...
.net core image怎么保存_轻量级Vue图片上传插件——Vue-core-image-Upload
介绍 vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩.它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程 ...
php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件
注:本地预览无效,需要在服务断运行使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...

react +antd-mobile图片上传插件（ImageUploader，支持七牛云直传）

快速上手

安装

引入

兼容性

react +antd-mobile图片上传插件（ImageUploader，支持七牛云直传）相关推荐

最新文章

热门文章