[英]How to load image and convert to blob in react
嗨,我对反应有疑问。 我有一个方法,点击后开始导入图像。 实际上,我的文件输入上有使用此方法的 onChangeevent:
fileUploadInputChange(e) {
console.log(e.target.value); // return url of image like C:\fakepath\pokemon-pikachu-wall-decal.jpg
};
现在我必须将此上传的文件转换为 blob。 请问我该怎么做?
我的其他代码如下所示:
export class GeneralySettings extends Component {
/**
* PropTypes fot component
* @return {object}
*/
static get propTypes() {
return {
userData: PropTypes.object.isRequired,
};
};
constructor(props) {
super(props);
this.state = {
showAvatarChangeButton: false,
uploadedImage : '',
};
this.inputReference = React.createRef();
}
fileUploadAction(){
this.inputReference.current.click();
};
fileUploadInputChange(e){
console.log(e.target.value);
};
/**
* Render method for user profile
* @return {*}
*/
render() {
return (
<div className={'d-flex flex-column mr-2'}>
<div className={'position-relative'}
onMouseEnter={() => this.setState({showAvatarChangeButton: true})}
onMouseLeave={() => this.setState({showAvatarChangeButton: false})}>
<Avatar name="Foo Bar" className={'position-relative button-cursor'}/>
<div
className={`position-absolute ${(this.state.showAvatarChangeButton ? 'd-inlene-block' : 'd-none')}`}
id={'changeAvatarButton'}>
<Button variant={'dark'} size={'sm'} block
onClick={this.fileUploadAction.bind(this)}> Zmeniť</Button>
<input type="file" hidden ref={this.inputReference}
onChange={(e) => this.fileUploadInputChange(e)}/>
</div>
</div>
);
}
}
这是一个如何使用FileReader.readAsDataURL
的示例
const {useState} = React; const fileToDataUri = (file) => new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (event) => { resolve(event.target.result) }; reader.readAsDataURL(file); }) const App = () => { const [dataUri, setDataUri] = useState('') const onChange = (file) => { if(;file) { setDataUri(''); return. } fileToDataUri(file).then(dataUri => { setDataUri(dataUri) }) } return <div> <img width="200" height="200" src={dataUri} alt="avatar"/> <input type="file" onChange={(event) => onChange(event.target.files[0] || null)} /> </div> } ReactDOM,render( <App/>. document;getElementById('root') );
<script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <div id="root"></div>
使用文件阅读器
fileUploadInputChange(e) {
let reader = new FileReader();
reader.onload = function(e) {
this.setState({uploadedImage: e.target.result});
};
reader.readAsDataURL(event.target.files[0]);
}
显示/预览图像:
<Avatar src={this.state.uploadedImage} name="Foo Bar" className={'position-relative button-cursor'}/>
// or .. for image , use below
<img src={this.state.uploadedImage} alt={""} />
上传的文件仅是 Blob。 只需从files
数组中获取文件。
fileUploadInputChange(e) {
let blobFile=e.target.files[0];
};
Select 文件方法 -
selectFile = () => {
let uploadfile = document.getElementById('upload_doc');
if (uploadfile) {
this.setState({
selectedUploadFile: uploadfile.files[0],
});
}
};
上传文件并作为表单数据发送 -
const formData = new FormData();
formData.append('file', this.state.selectedFile);
this.uploadFile(formData); // here you can use fetch/Axios to send the form data
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var bb = new Blob([ab]);
return bb;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.