react-weui组件的运用之上传图片控件的用法及input上传图片

第一步：连接UI查找官方文档；链接：https://weui.github.io/react-weui/docs/#/react-weui/docs/page/1/articles/12；

第二步：安装react-weui

npm i --save weui react-weui

第二步引入reactweui控件包

import {Page, Gallery, GalleryDelete, Uploader, Form, Cell, CellBody }  from 'react-weui'

import 'weui';
import 'react-weui/build/packages/react-weui.css'(样式包的引入是必备的)
不然就无法达到预期的效果

第三步移入代码，设置参数；
3.1初始化初始状态值

this.state = {
            gallery: false,
            demoFiles : [
            	{
            		url:""//上传图片的本地路径
            	}
            ]
        }

3.2引入gallery组件，是上传必须要有的一个组件

renderGallery(){
        if(!this.state.gallery) return false;

        let srcs = this.state.demoFiles.map(file=>file.url)

        return (
            <Gallery
                src={srcs}
                show
                defaultIndex={this.state.gallery.id}
                onClick={ e=> {
                	console.log('删除');//开启删除接口
                    //avoid click background item
                    e.preventDefault()
                    e.stopPropagation();
                    this.setState({gallery: false})
                }}
            >

                <GalleryDelete onClick={ (e, id)=> {
                    this.setState({
                        demoFiles: this.state.demoFiles.filter((e,i)=>i != id),
                        gallery: this.state.demoFiles.length <= 1 ? true : false
                    })
                }} />

            </Gallery>
        )
    }

3.3关键点引入Uploader组件；

render(){
		return(
				<Page className="cell" title="上传图片" subTitle="上传图片">
                { this.renderGallery() }
                <Form>
                    <Cell>
                        <CellBody>
                            <Uploader
                                title="图片上传"
                                maxCount={10}
                                files={this.state.demoFiles}
                                onError={msg => alert(msg)}
                                onChange={(file,e) => {
                                	this.sendUpajax(file,e)
                                }}
                                onFileClick={
                                    (e, file, i) => {
                                        console.log('file click 删除图片', file, i)
                                        this.setState({
                                            gallery: {
                                                url: file.url,
                                                id: i
                                            }
                                        })
                                    }
                                }
                                lang={{
                                    maxError: maxCount => `最大上传${maxCount} 张图片`
                                }}
                            />
                        </CellBody>
                    </Cell>
                    
                </Form>
            </Page>
		)
	}

可以设置的参数：

 maxCount

表示上传最多能上传多少张图片

demoFiles

设置上传图片的本地路径

maxWidth

设置最大宽度；

files文件中可以设置第三个值路径（src），错误提示（error），上传状态（status）

onChange上传图片函数

onError上传图片错误函数提示msg->alert(msg)

title表示上传图片标题

filter函数的过滤问题：它能当作map函数运用；进行遍历；

见下面代码：

let data = ['道','流道','的开放接口都是']
	var newData = data.filter((e,i,s)=>{
			console.log(e);//道 流道 的开放接口都是
			console.log(i);//0,1,2
			console.log(s);//返回原数组
			return true;
			//return false
		})
console.log(newData);
返回原数组，return中可以加判断对所需的素组进行过滤；

input上传调取摄像头及图片上传；

<input type='file' id='files' accept="image/*" capture="camera"/>

/*
*capture属性和accept属性的值；
*
*1.camera表示只调取照相机；image/*表示接受所有图片；
*
*2.如果属性中使用multiple属性，则caputer属性失效；表示支持多选；
*2.2 accept 可以为vedio audio image值表示即可从本地也可调取手机设备；
*
*3.只要上传视频或者音频accept属性为vedio或audio即可，但是capture属性的值，得有变化
*3.3 capture可以为camcorder摄像机 microphone调取录音功能（ios手机无法直接调取录音功能，Andrio行）
*
*/

图片上传，可以采取两种方式，一种是formData数据进行上传，另种将图片转换成路径，进行上传。

第一种：FormData;

let formData = new FormData();
 for(var i in data){
            formData.append(i,data[i])
  }

//此时data上送参数则为 formData，这种形式即可上传文件图片也可以上传其他类型数据。

第二种：路径方式：

 function getImgObj(file){
	 	var url = '';
	 	if(window.createObjectURL != undefined){
	 		url = window.createObjectURL(file);
	 	}else if(window.URL != undefined){
	 		url = window.URL.createObjectURL(file);
	 	}else if(window.webkitURL != undefined){
	 		url = window.webkitURL.createObjectURL(file);
	 	}
	 	return url;
 }
//转成路径进行上传；

react-weui组件的运用之上传图片控件的用法及input上传图片

猜你喜欢