微信端图片上传

/*显示tab组件*/
import React, { Component } from 'react'
import ImagePicker from 'antd-mobile/lib/image-picker';
import './imagePicker.css'
import cropper from './cropper/dist/cropper.js';
let processFils={};

const imgsList=[]
var DealWithImg = React.createClass({
    getInitialState: function () {
        return {
            files:this.props.files?this.props.files:[],
        }
    },
    //上传图片
    ajaxphotos: function () {
         let {files}=this.state;
        const $this=this
        var object = new Object();
        object.controlType = "uploadImg";
        object.base64Img = processFils.path;
        object.fileName = processFils.name;
         
        ajaxFa.call(this,{
            returnData:object,
            showload:false,
            success:(data)=>{
                if (data.success ==true) {
                    console.log("上传图片成功")
                    $(".layermcont").html("上传图片成功");
                    $this.tocancelcropper();
                    setTimeout(function () {
                        layer.closeAll();
                    }, 1000);
                    var imgsrc =isnullimg1(data.map.filePath);
                    let imgs={};
                    imgs.url=processFils.path;
                    imgs.name=processFils.name;
                    imgs.path=imgsrc;
                    imgs.size=processFils.size;
                    imgs.type=processFils.type;
                    this.toconfirmImg(imgs)
                } 
            },
        },"/otcdyanmic/appraisals.do")
    },/*确认并处理上传的图片  */
    toconfirmImg(imgs){
        let {isMultiple,onChange}=this.props;
        let {files}=this.state;
        if(isMultiple=="false"){ //单张
            let imgsArr=[];
            imgsArr.push(imgs)
            this.setState({files:imgsArr})
        }else{
            var filesNum=files.length;
             files.push(imgs)
            this.setState({files})
            
        }
        onChange(files,"add","");
        

    },
    /* 确认剪切图片 */
    toconfirmcropper: function () {
        var photourl = "";
        var $images = $('#cutoutphotos');
        //$images.cropper("enable");
        var $this = this
        var croppedCanvas = $images.cropper('getCroppedCanvas');
        photourl = croppedCanvas.toDataURL();
        processFils.path=photourl;
        var $this = this;
            layer.open({
                shade: true,
                content: '图片上传中...',
                skin: 'msg',
                className: 'tip',
            });
            $this.ajaxphotos();
    },/* 取消 */
    tocancelcropper: function () {
        $('#yourElements').css("-webkit-transform", "translateX(180%)");
        setTimeout(function () {
            var $images = $('#cutoutphotos');
            $(".crophotos").html("<img id='cutoutphotos' data-name='' src='' />");
            $images.cropper('reset').cropper('replace', "");
            $('#yourElements').removeClass('selecteds');
        }, 600);
    },

    /* 压缩裁剪图片*/
    doImg(files,callback){
        const {isCropper="true"}=this.props;
        const preview_src=files.url;
        const photoname=files.name;
        const types=preview_src.substring(preview_src.indexOf("/")+1,preview_src.indexOf(";"));   //获取类型 ;
        processFils.name=generateMixed(5)+"."+types;
        processFils.type=types
        var $images = $('#cutoutphotos');
        //压缩图片
        var $this = this;
        var img = new Image();
        img.src = preview_src;
        if (img.complete) {
            var imgwd = img.width;
            if (imgwd > 640) {
                lrz(preview_src, { width: 640 })
                    .then(function (rst) {
                        processFils.size=rst.base64Len
                        // 处理成功会执行
                        $("#cutoutphotos").attr("src", rst.base64);
                        // $('.cropconter').animate({ "left": "0px" }, 1000);
                        $('#yourElements').css("-webkit-transform", "translateX(0%)");
                        //裁剪图片
                        $images.cropper({
                            aspectRatio: 1 / 1,
                            autoCropArea: 0.9,
                            background: false,
                            guides: false,
                            rotatable: false,
                            movable: true,
                            dragCrop: false,
                            resizable: false
                        });
                    })
            }

            if (imgwd <= 640) {
                lrz(preview_src)
                    .then(function (rst) {
                        processFils.size=rst.base64Len
                        
                        // 处理成功会执行
                        $("#cutoutphotos").attr("src", rst.base64);
                        // $('.cropconter').animate({ "left": "0px" }, 1000);
                        $('#yourElements').css("-webkit-transform", "translateX(0%)");
                        //裁剪图片
                        $images.cropper({
                            aspectRatio: 1 / 1,
                            autoCropArea: 0.9,
                            background: false,
                            guides: false,
                            rotatable: false,
                            movable: true,
                            dragCrop: false,
                            resizable: false
                        });
                    })
            }
        } else {
            img.onload = function () {
                var imgwd1 = img.width;

                if (imgwd1 > 640) {
                    lrz(preview_src, { width: 640 })
                        .then(function (rst) {
                            processFils.size=rst.base64Len
                            // 处理成功会执行
                            $("#cutoutphotos").attr("src", rst.base64);
                            // $('.cropconter').animate({ "left": "0px" }, 1000);
                            $('#yourElements').css("-webkit-transform", "translateX(0%)");
                            //裁剪图片
                            $images.cropper({
                                aspectRatio: 1 / 1,
                                autoCropArea: 0.9,
                                background: false,
                                guides: false,
                                rotatable: false,
                                movable: true,
                                dragCrop: false,
                                resizable: false
                            });
                        })
                }
                if (imgwd1 <= 640) {
                    lrz(preview_src)
                        .then(function (rst) {
                            // 处理成功会执行
                            processFils.size=rst.base64Len
                            $("#cutoutphotos").attr("src", rst.base64);
                            $("#cutoutphotos").attr("data-name", photoname);
                            // $('.cropconter').animate({ "left": "0px" }, 1000);
                            $('#yourElements').css("-webkit-transform", "translateX(0%)");
                            //裁剪图片
                            $images.cropper({
                                aspectRatio: 1 / 1,
                                autoCropArea: 0.9,
                                background: false,
                                guides: false,
                                rotatable: false,
                                movable: true,
                                dragCrop: false,
                                resizable: false
                            });
                        })
                }

                img.onload = null;

            };
        };
    },
    /* 选择图片 */
    onChangeImgs(files, type, index){
        const {onChange=()=>{},isMultiple="true"}=this.props;
        var filesNum=files.length;
        switch(type){
            case("add"):
                this.doImg(files[filesNum-1]);
            break;
            case("remove"):
             if(isMultiple=="false"){ //单张
                files=[];
                this.setState({files:[]})
                onChange([], type, index);
             }else{
                this.setState({files})
                
                onChange(files, "remove", index);
             }
            break;
        }
    },
    render:function () {
        const {onChange=()=>{}}=this.props;
        const {files}=this.state;
        return (
            <section>
                 <ImagePicker
                        files={files}
                        onChange={this.onChangeImgs}
                        onAddImageClick={(index, fs) => console.log(fs)}
                        selectable={files.length < 5}
                />
                <div className="yourElements" id="yourElements">
                    <div className="crophotos">
                        <img id="cutoutphotos" data-name="" src="" />
                    </div>
                    <div className="cropbtn">
                        <p><span className="btnN" onTouchStart={this.tocancelcropper}>取消</span><span className="btnY" onTouchStart={this.toconfirmcropper}>确认</span></p>
                    </div>
                </div>
            </section>
        );
    }
});
export default DealWithImg;
// 调用：   import DealWithImg from '../../js/mobile_modules/utils/dealWithImg/dealWithImg.js'

/*

 < DealWithImg files={this.state.files} onChange={this.onChangeImg}/>


*/