上传按钮＜input type=“file“ /＞美化及使用

借鉴文章：上传按钮<input type="file" />智能多效美化

先摆放一张图片来说明在React项目中的使用：

其中【上传照片】按钮是 将<input type="file" />与<label>配合，以保持语义化+可访问性为目标，辅以少量Javascript来实现美化的。

下面按照实际开发的项目来逐一讲解（只针对长处方申请业务）：

1、Antd Pro2.x中业务代码目录

2、在父组件ResidentContract.js中获取 长处方申请 中已上传的数据

/**
 * 4、打开对应的签约操作页面
 * 7-长处方申请
 */
openTabByBtnType = async (item, type) => {
  const {tabPanes, keyList} = this.state;
  const _tabPanes = tabPanes;
  const _keyList = keyList;

  // 7-长处方申请
  if (type === '7') {
    const {dispatch} = this.props;

    //<1>查询已上传的长处方图片
    const {SIGN_ID} = item;
    let recipeCheckedArr = [], fileDetailArray = [], fileTypeFor11 = false;
    await dispatch({
      type: 'residentRecipePhotoModel/selectUploadedRecipePhotoList',
      payload: SIGN_ID,
      callback: (res) => {
        let recipeTypeStr = '';

        if (res.status === 200) {
          const {data} = res;
          for (let i = 0, length = data.length; i < length; i++) {
            if (i == length -1) {
              recipeTypeStr += data[i].fileType;
            } else {
              recipeTypeStr += data[i].fileType + ',';
            }
          }

          // ▲删除签约人员中的重复的长处方类型
          recipeCheckedArr = recipeTypeStr.split(',').filter((element, index, self) => {
            return self.indexOf(element) === index;
          });

          /*查询是否有 '其他' 类型*/
          recipeCheckedArr.map((ele) => {
            if(ele === '11') {
              fileTypeFor11 = true;
            }
          });

          // <1>处理查询结果中fileType对应的attachId, attachId为保存照片内容表的外键
          // <2>过滤出有图片内容的集合
          const fileList = {};
          let n = 0;
	      data.forEach(function (element) {
          const {fileType, attachId, fileContentDetail} = element;
		  if (!!fileContentDetail) { // 图片内容不为空，说明有上传长处方类型图片
		    fileList[fileType] ?
			  fileDetailArray[fileList[fileType] - 1].IdAndUrl.push({attachId, fileContentDetail}) :
				 fileList[fileType] = ++n && fileDetailArray.push({
					fileType: fileType,
					IdAndUrl: [{attachId, fileContentDetail}],
					signId: SIGN_ID
			   });
		     }
          });
        }
      }
    });

    //<1>(从数据字典中)查询慢病长处方类型
    dispatch({
      type: 'residentRecipePhotoModel/getRecipeType',
      payload: '',
      callback: (res) => {
        const {status, data, msg}  = res;
        if (status === 0) {
          _tabPanes.push({title: '长处方申请', id: '7', key: '7', state: '7', closable: false, 
            tabsDetail: data,
            loadedPhotoArray: fileDetailArray,  // 签约人员长处方上传图片的相关信息
            recipeCheckedArr,     // 过滤后的内容,用于匹配哪个checkbox选中
            signPersonDetail: item,
            fileTypeFor11: fileTypeFor11
          });
          _keyList.push('7');

          this.setState({ tabPanes: _tabPanes, activeKey: '7', keyList: _keyList });

        } else {
          Modal.info({title: '提示信息', content: msg, okText: '确定'});
          return;
        }
      }
    });
  }
}

注：针对  【// <2>过滤出有图片内容的集合】的处理代码，可参考本人写过的 如何把数组对象中相同的key值合并，并且把对应的id放到一个数组中。

type: 'residentRecipePhotoModel/selectUploadedRecipePhotoList' 获取的数据如下图：

type: 'residentRecipePhotoModel/getRecipeType' 获取的数据：

3、在ResidentContractMiddle.js组件render()中，长处方申请组件接收参数

 

4、ResidentContractMedApply.js

import React, {Component} from 'react';
import {connect} from "dva";
import {Row, Col, Button, Form, Checkbox, Modal, Upload, message} from 'antd';
import PubSub from "pubsub-js";

import {openCaptureVideo} from '@/utils/getSignPatient';

import styles from './ContractMiddleTab.less';

const FormItem = Form.Item;
let globalSignId = 0;

/**
 * @Description: 居民签约-长处方申请
 * @author wanglong
 * @date 2020/7/10 13:59
 */
@connect(({ residentRecipePhotoModel }) => ({residentRecipePhotoModel}))
@Form.create()
export default class ResidentContractMedApply extends Component {
	// 1、初始化状态
	state = {
		previewVisible: false,      // 图片是否预览
		previewImageUrl: '',        // 预览图片的URL(实际为api请求)
		recipeCheckedArray: this.props.recipeCheckedArr,
		fileMap: new Map(),         // 长处方类型与对应的图片 的集合
		loadedPhotoArray: !!this.props.loadedPhotoArray ? this.props.loadedPhotoArray : [], // 数据库已经上传的图片集合
		delFlag: true,              // 控制删除一张图片导致图片集合全部清空的问题
		attachIdArray: [],          // 用来保存保存长处方类型图片子表外键值

		recipePhotoDisabled: false, // 长处方
	}

	//<1>checkbox勾选事件 2019/2/24
	handleRecipeIsCheck = (event) => {
		const {checked, id} = event.target;
		const {recipeCheckedArr, signPersonDetail: {EHR_ID}} = this.props;
		const checkId = id.split('_')[1];

		if (checked) {
			recipeCheckedArr.push(checkId);
			this.setState({recipeCheckedArray: recipeCheckedArr}, () => {
				PubSub.publish( 'changeCheckedDiseases', {ehrId: EHR_ID, fileType: checkId, flag: true});
			});

		} else {
			const photoList = this.state.fileMap.get(checkId * 1);
			if (photoList && photoList.length > 0) {
				Modal.confirm({title: '你确定要清空图片吗?', okText: '确定', cancelText: '取消',
					onOk: () => {
						recipeCheckedArr.splice(recipeCheckedArr.findIndex(v => v === checkId), 1);
						this.setState({ recipeCheckedArray: recipeCheckedArr }, () => {
							PubSub.publish('changeCheckedDiseases', {ehrId: EHR_ID, fileType: checkId, flag: false});
						});
					},
				});

			} else {
				recipeCheckedArr.splice(recipeCheckedArr.findIndex(v => v === checkId), 1);
				this.setState({ recipeCheckedArray: recipeCheckedArr }, () => {
					PubSub.publish('changeCheckedDiseases', {ehrId: EHR_ID, fileType: checkId, flag: false});
				});
			}
		}
	}

	/*<2>自定义文件上传*/
	// 过渡方法：间接打开上传文件窗口
	myBtnUploadClick = (id, signId) => {
		globalSignId = signId;
		const fileInput = document.getElementById(`refFile_${id}`);
		fileInput.click();
	}

	inputFileChange = (e) => {
		const {dispatch} = this.props;
		const {fileMap, attachIdArray} = this.state;

		const fileType = e.target.id.split('_')[1];
		const fileObj = e.target.files[0];
		const fileName = e.target.name;

		//检验文件类型是否正确
		const isJPG = fileObj.type === 'image/jpg';
		const isJPEG = fileObj.type === 'image/jpeg';
		const isPNG = fileObj.type === 'image/png';
		const isPic = isJPG || isJPEG || isPNG;
		if (!isPic) {
			message.error('只能上传jpg/jpeg/png格式的图片！');
			e.target.value = ''; // 还原
			return;
		}

		if(fileObj) {
			const formData = {
				recipeFile: fileObj,
				tableName: "ehr_cli_registry",
				paramId: globalSignId,
				recipeType: fileType
			};
			dispatch({
				type:'residentRecipePhotoModel/uploadRecipePhotoByAntd',
				payload: formData,
				callback: (res) => {
					if (res.status === 200) {
						const { attachId, photoBase64, file_type} = res.data;
						const list = !!fileMap.get(file_type) ? fileMap.get(file_type) : [];
						list.push({
							uid: attachId,
							status: 'done',
							url: attachId,
							thumbUrl: "data:image/jpg;base64," + photoBase64,
							fileType: file_type,
						});
						fileMap.set(file_type, list);

						this.setState({
							fileMap,
							loadedPhotoArray: [],
							delFlag: false,
							attachIdArray: [...attachIdArray, attachId],
						});
					}
				}
			});
		}

		e.target.value = ''; // 上传之后还原
	}
	/*自定义文件上传END*/

	//<3>删除图片
	handlePhotoRemove = (file) => {
		const {dispatch} = this.props;
		dispatch({
			type: 'residentRecipePhotoModel/deleteRecipePhoto',
			payload: file.uid
		});

		let {fileMap} = this.state;
		const index = fileMap.get(file.fileType).indexOf(file);
		const newFileList = fileMap.get(file.fileType).slice();
		newFileList.splice(index, 1);
		fileMap.set(file.fileType, newFileList);

		this.setState({fileMap, loadedPhotoArray: [], delFlag: false});
	}

	//<4>图片预览 2019/2/24
	handlePreview = (file) => {
		const {dispatch} = this.props;
		const {uid} = file;
		dispatch({
			type:'residentRecipePhotoModel/selectPhotoThumbUrl',
			payload: uid,
			callback: (res) => {
				if (!!res) {
					this.setState({previewImageUrl: res, previewVisible: true});
				}
			}
		});
	}

	//<5>取消图片预览 2019/2/24
	handlePreviewCancel = () => {
		this.setState({ previewVisible: false });
	}


	// 渲染组件
	render() {
		const {previewVisible, previewImageUrl, recipeCheckedArray, loadedPhotoArray, delFlag, recipePhotoDisabled} = this.state;

		let {fileMap} = this.state;

		//loadedPhotoArray: 签约人员已有的长处方类型图片; recipeCheckedArr: 过滤去重后的长处方类型
		const {form: { getFieldDecorator }, tabsDetail, signPersonDetail, fileTypeFor11} = this.props;

		/*已经上传的图片回显处理 wanglong */
		if (loadedPhotoArray && loadedPhotoArray.length > 0) {
			loadedPhotoArray.map((element) => (
				tabsDetail.map(tab => {
					const tempList = [];
					if (element.fileType === tab.dictId * 1) {
						element.IdAndUrl.map(obj => {
							tempList.push({
								uid: obj.attachId,
								status: 'done',
								url: `${obj.attachId}`,
								thumbUrl: "data:image/jpg;base64," + obj.fileContentDetail,
								fileType: element.fileType,     // 额外添加的参数
							});
						});

						fileMap.set(element.fileType, tempList);
					}
				})
			));
		}
		// 清空之前的数据
		else if(delFlag) {
			fileMap = new Map();
		}

		return (
			<div>
				<Form.Item style={{ marginTop: -5, marginBottom: -2}}>
					<Button type="primary" style={{float: 'right'}} onClick={() => this.handleSaveRecipePhoto(signPersonDetail)} disabled={recipePhotoDisabled}>
						保存
					</Button>
				</Form.Item>
				<hr style={{ border: '0.5px solid #1890FF', clear:"both" }} />
				{
					tabsDetail.map((recipe, index) => {
						const fileList = !!fileMap.get(recipe.dictId * 1) ? fileMap.get(recipe.dictId * 1) : [];

						if(!fileTypeFor11){
							if (recipe.dictId !== '11' ) { // '其他'项
								return (
									<Row key={index} style={{ marginBottom: 5 }}>
										<Col span={5}>
											<FormItem>
												{getFieldDecorator(`recipe_${recipe.dictId}`, { initialValue: recipe.dictId })(
													<Checkbox checked={recipeCheckedArray.includes(recipe.dictId)} onChange={this.handleRecipeIsCheck}>
														{recipe.dictName}
													</Checkbox>
												)}
											</FormItem>
										</Col>

										{/*针对按钮的处理*/}
										<Col span={19} style={{ display: recipeCheckedArray.includes(recipe.dictId) ? 'block' : 'none' }} className={styles["upload-col"]}>
											<Button type="primary" style={{width: '100px'}} onClick={() => openCaptureVideo(recipe.dictId)} >打开高拍仪</Button>

											<label className={styles["label-upload"]} >
												<input type="button" className={styles["btn-input-upload"]} value="上传照片"
												       onClick={() => this.myBtnUploadClick(recipe.dictId, signPersonDetail.SIGN_ID)}
												/>
												<input type="file" name="recipeFile" className={styles["file-input"]} accept="image/jpg,image/png,image/jpeg,image/bmp"
												       id={`refFile_${recipe.dictId}`} onChange={this.inputFileChange}
												/>
											</label>

											<Upload className="upload-list-inline" listType="picture" onPreview={this.handlePreview} onRemove={this.handlePhotoRemove} fileList={fileList}></Upload>
										</Col>
									</Row>
								)
							}

						} else {
							return (
								<Row key={index} style={{ marginBottom: 5 }}>
									<Col span={5}>
										<FormItem>
											{getFieldDecorator(`recipe_${recipe.dictId}`, { initialValue: recipe.dictId })(
												<Checkbox checked={recipeCheckedArray.includes(recipe.dictId)} onChange={this.handleRecipeIsCheck}>
													{recipe.dictName}
												</Checkbox>
											)}
										</FormItem>
									</Col>

									{/*针对按钮的处理*/}
									<Col span={19} style={{ display: recipeCheckedArray.includes(recipe.dictId) ? 'block' : 'none' }} className={styles["upload-col"]}>
										<Button type="primary" style={{width: '100px'}} onClick={() => openCaptureVideo(recipe.dictId)} >打开高拍仪</Button>

										<label className={styles["label-upload"]} >
											<input type="button" className={styles["btn-input-upload"]} value="上传照片"
											       onClick={() => this.myBtnUploadClick(recipe.dictId, signPersonDetail.SIGN_ID)}
											/>
											<input type="file" name="recipeFile" className={styles["file-input"]} accept="image/jpg,image/png,image/jpeg,image/bmp"
											       id={`refFile_${recipe.dictId}`} onChange={this.inputFileChange}
											/>
										</label>

										<Upload className="upload-list-inline" listType="picture" onPreview={this.handlePreview} onRemove={this.handlePhotoRemove} fileList={fileList}></Upload>
									</Col>
								</Row>
							)
						}
					})
				}
				<Modal visible={previewVisible} footer={null} onCancel={this.handlePreviewCancel} style={{top: 20}}>
					<img alt="example" style={{ width: '100%' }} src={previewImageUrl}/>
				</Modal>
			</div>
		);
	}
}

 

5、ContractMiddleTab.less

/*针对长处方图片上传*/
/*上传外层label样式*/
.label-upload {
  position: relative;
  margin-left: 10px;
  zoom: 1
}

.btn-input-upload {
  padding: 4px 10px;
  width: 100px;
  height: 32px;   //大小
  text-align: center;
  color: #fff;            //文字系列
  border: 1px solid #1890FF;
  background-color: #1890FF;
  border-radius: 4px;     //背景
  cursor: pointer;
  zoom: 1;
}

.btn-input-upload:hover {
  color: #fff;
  background-color: #40a9ff;
  border-color: #40a9ff;
}

.file-input {
  position: absolute;
  left: 0;
  top: -2px;
  width: 100px;
  opacity: 0;
  display: none;
}

.upload-col {
  :global {
    /*上传图片的样式*/
    .upload-list-inline .ant-upload-list-item {
      float: left;
      width: 120px;
      margin-right: 8px;
    }
  }
}

说明：因为业务需求的原因，此处文件上传并没有直接利用<label>中的 for 属性的值（锚点链接的方式） 与 <input type="file" name="file" id="xxx" /> 中 id 属性的值进行关联。而是起了一个包裹美化的作用，让第一个input起到button的作用，进而再去调用上传文件的input。