如何使用钩子在react js中获取上传的文件本地路径



当我上传图像时,在控制台中显示它是blob,找不到文件,我只想在控制台中查看文件的本地路径

import React, {useState} from "react";
export default function FileUpload() {
const [file, setFile]=useState(null);
const uploadSingleFile= (e) =>{
setFile( URL.createObjectURL(e.target.files[0]))
};
const  upload= (e)=> {
e.preventDefault();
console.log(file);
};
let imgPreview;
if (file) {
imgPreview = <img src={file} alt='' />;
}
return(
<div>
<form className="col-md-6 mx-auto">
<div className="form-group preview">
{imgPreview}
</div>
<div className="form-group">
<input type="file" className="form-control" onChange={uploadSingleFile} />
</div>
<button type="button" className="btn btn-primary btn-block" onClick={upload}>Upload</button>
</form >
</div>
)
}

出于安全原因,浏览器不允许您的文件有确切的路径,您只能使用伪路径的目标的value属性访问伪路径

相关内容

  • 没有找到相关文章