原生图片上传

图片上传没有用组件，用的input写的，之前尝试过用antd组件，发现封装的不是很好，就放弃了。
效果图：

image.png

<div>
                <Title  titleName={'轮播图片选择'} />
                <div  className="upload-row">

                    <label className="upload-box" >
                        <input  />
                        {imgId ? <img  className={'selectImg'}   src={`/common/api/v1.0/creditSharePlatform/file/downloadExtend?attachment=false&&id=${imgId}`} /> : <img  className={'originImg'}   src={ImgPo} />}
                    </label>
                </div>
                <p className={style.littleText}>*图片大小不超过5M，推荐使用尺寸为816*320的照片，或同比例缩放图片</p>
                <label  htmlFor="business">
                    <p className={style.inpDiv}   >  <span className={style.text}>上传图片</span>   <input onChange={e => onFileChange(e)} type="file" id="business" accept=".png,.jpg,.gif"/>    </p>
                </label>
            </div>

页面样式：

    .upload-row{
    border:1px solid #ccc;
    width:520px;
    height:200px;
    position: relative;

    label, .upload-box {
        display: inline-block;
        vertical-align: middle;
    }
    label {
        margin-right: 50px;
        color: #333;
        font-size: 16px;
    }
    .upload-box {
        width: 126px;
        height: 99px;
       
        overflow: hidden;
        margin: 50px 186px;
        input {
            outline: none;
            border: none;
            opacity: 0;
        }

        .originImg{
            width:100px;
            height:80px;
        }
        .selectImg{
            position: absolute;
            left: 0;
            top: 0;
            width:520px;
            height:200px;
        }
    }
}

.inpDiv{
   
    margin:30px 0 0 160px;
    height:40px;
    width:200px;
    background-color: #4593D9;
    border-radius:4px;
    padding-top: 10px;
    cursor: pointer;
    input{
       opacity: 0; 
       z-index: 100;
       
    }
    .text{
       
        font-size:14px;
         margin-left: 70px;
        font-weight:400;
         z-index:0;
        color:rgba(255,255,255,1);
    }
    .inpBtn{
         opacity: 0;   
         z-index: 100;  
         cursor: pointer;
    }
}

获取文件的函数

 // 图片上传
    onFileChange = (e) => {
        e.persist();

        // console.log('e.target.value', e.target.value, e.target.value.indexOf(','));
        if (e.target.value.indexOf(',') !== -1) {
            message.info('图片名含逗号导致无法上传,请修改');
            return;
        }
        if(!e.target.value.match(/\.(jpg|png|gif)$/)) {
            message.info('请上传后缀名.jpg或.png或.gif的图片');
            return;
        }
        if (e.target.files.length === 0) {
            return;
        }
        
        // console.log('图片', e, 'e.target.files[0]', e.target.files[0]);
        service.upload({file: e.target.files[0]}).then(res => {

            this.setState({
                imgId: res.data.fileSystemList[0].id
            });
            this.props.saveValue('imgId', res.data.fileSystemList[0].id);
        });
    }

封装的功能

 // 上传图片  
    upload: function upload(params) {
        return uploadFile(`/common${API.V1}/creditSharePlatform/file/upload`, params);
    }
 */
export function uploadFile(url, params, onProgress) {
    url = comboUrl(url);
    const fd = new FormData();
    fd.append('files', params.file);
    // return isomorphicFetch(url, {
    //     method: 'POST',
    //     credentials: 'include',
    //     body: fd
    // }).then(response => {
    //     return filterResponse(response);
    // })
    //     .catch(function(err) {
    //         console.log('Fetch Error : %S', err);
    //     });

    // fetch暂时不支持onprogress，这里为了获取上传进度，只能用XMLHttpRequest 2。
    // 不过FetchObserver对象已在草案阶段，规范实施后就能获取请求的进度
    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onload = function() {
            resolve(filterResponse(new Response(xhr.response)));
        };
        xhr.onerror = function(e) {
            reject(e);
        };
        xhr.upload.onprogress = function(e) {
            onProgress && onProgress(Math.floor(e.loaded / e.total * 100));
        };
        xhr.send(fd);
    });
}