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;
 }
//轉成路徑進行上傳；