一、场景
- 产品给了个设计图,需要点击【自定义】图标或者其他图片来完成上传的动作。(打开选择文件弹窗,并选择文件)
- 思路:利用 input-type 的 “file” 属性来完成。
-首先隐藏掉原始的 html input,设置id属性【id = file】
-点击自定的图片或者按钮,通过js模拟 input 的点击事件,从而触发打开选择文件窗口。 【dom.click()】
-获取到的文件file通过 FormData 来储存 然后就可以直接发送给后台了。
二、Code 如下(不重要的已经隐藏)
import React, { Component } from 'react'
import Ajax from 'zan-ajax';
class Upload extends Component {
// 1 点击按钮,利用 js 触发选择文件
getFilds = () =>{
const filedom = document.getElementById('file');
filedom.click()
}
// 2 用于监听按钮上传的事件
fileinputChange = (event) =>{
const fileData = event.target.files[0];
// // fileData获取到的文件
// if(fileData){
// this.setState({ fileData, })
// const formdata = new FormData();
// formdata.append("file",fileData);
// this.send(formdata)
// }
}
// 文件上传
// send = (formdata) =>{
// Ajax({
// url,
// method:"post",
// data: formdata,
// headers: {
// Accept: 'application/json',
// 'Content-Type': 'application/json',
// },
// }).then(res=>{
// resolve(res.data)
// }).catch((err)=>{
// cb ? reject(err) : console.log(`错误 err`, err);
// })
// }
render() {
return (
<div>
<input
type="file" id="file" accept=".xls,.xlsx"
style={{ display:"none", }} onChange={this.fileinputChange}
/>
<button type="primary" onClick={this.getFilds}>上传excel</button>
</div>
)
}
}
export default Upload;
如果感觉对你有帮助,动动小手点个赞吧 ↓↓↓