js實現(xiàn)圖片上傳功能君账，實現(xiàn)的效果繁堡，先見圖來壓壓驚
圖片上傳.gif
原理：
結構部分：input標簽
之前你可能沒有注意到，input標簽還有這個作用乡数。
1.type屬性為file
2.accept為允許選擇的文件格式（如果是圖片椭蹄，則選擇彈框里不會出現(xiàn)其他格式的文件），
3.onChange回調函數(shù)的參數(shù)是我們所選擇的文件對象數(shù)據(jù)净赴。
如下：
<input type='file' accept='image/*' onChange={this.handleSelectFile.bind(this,this.state.uploadUrl)} />
js部分：ajax請求
通過實例化XMLHttpRequest對象绳矩，發(fā)起ajax請求，并監(jiān)聽進度和readyState值劫侧，獲取后端返回值埋酬，完成上傳哨啃。
注意：
1.該圖片上傳功能烧栋，可以將選擇過程和上傳過程分離，比如你選擇了一個圖片拳球，可以預覽圖片审姓，可以多次選擇和預覽，最終再確認上傳祝峻！
2.可以自行對代碼進行修改魔吐，就可以適用于上傳視頻或者其他文件！
github:https://github.com/Amy-Tong126/uploadImageDemo
該圖片上傳功能的UI部分是基于antd實現(xiàn)的莱找，如果不使用antd也可以在對應位置進行替代酬姆。
具體代碼如下：
JSX:
import logo from './logo.svg';
import './App.css';
import { message,Modal,Icon,Progress } from 'antd';
import uploadFunction from "./js/uploadFunction";
class App extends Component {
constructor(props){
super(props);
this.state={
file:{},//保存文件對象內容
src:"",//保存圖片的url
progress:0,//上傳進度
uploadUrl:"http://192.168.1.20:13003/fileDetail/upImg/1/3139",//上傳地址
}
}
/*
點擊上傳時觸發(fā)input的點擊事件
*/
clickUploadBtn(){
this.refs.uploadInput.click();
}
/*
* 選擇要上傳的圖片
* */
handleSelectFile(uploadUrl,e){
const file = e.target.files[0];
if (!file) {
return;
}
let src;
// 匹配類型為image/開頭的字符串
if (file.type==="image/png"||file.type==="image/jpeg") {
src = URL.createObjectURL(file);
}else{
message.error("圖片上傳只支持JPG/PNG格式,請重新上傳！");
return;
}
if (file.size/1024/1024>5) {
message.error("圖片上傳大小不要超過5MB,請重新上傳奥溺！");
return;
}
this.setState({
file:file,
src:src
});
this.startUpload(uploadUrl,file);
}
/*
* 開始上傳圖片
* */
startUpload(uploadUrl,file){
let this_=this;
/*
* 調用上傳圖片的封裝方法
* */
uploadFunction.uploadForImage(
uploadUrl,
file,
function (progress,response) {//回調函數(shù)處理進度和后端返回值
this_.setState({
progress:progress
});
if (response&&response.code === 200) {
message.success("上傳成功辞色！");
}else if (response && response.code !== 200) {
message.error(response.msg)
}
},
localStorage.getItem("access_token"));
}
render() {
return (
<div className="App">
<div style={{float:"left"}}>
{this.state.src?
<div className="imgBox">
<img src={this.state.src} alt=""/>
{this.state.progress===100?null:
<div className="mask">
<div className="fileName">
{this.state.file.name}
</div>
<div className="progress">
<Progress
percent={this.state.progress}
size="small"
status="active"
showInfo={false}
strokeColor="#31c060"
strokeWidth={3}
/>
</div>
</div>
}
</div>
:
<div
className="uploadBox"
onClick={this.clickUploadBtn.bind(this)}
>
<Icon type="plus" style={{lineHeight:"150px",fontSize:"40px",color:"#999"}}/>
</div>
}
<input
ref="uploadInput"
type='file'
accept='image/*'
style={{width:"100px",border:"none",visibility:"hidden"}}
onChange={this.handleSelectFile.bind(this,this.state.uploadUrl)}
/>
</div>
</div>
);
}
}
export default App;
上面引入的uploadFunction函數(shù)如下:
function uploadForImage(url,data,callback,token) {//data是文件對象
let xhr = new XMLHttpRequest();
let form = new FormData();
form.append('file', data);
function uploadProgress(e) {
if (e.lengthComputable) {
let progress = Math.round((e.loaded / e.total) * 100);
callback(progress);
}
}
/*
* 監(jiān)聽請求的進度并在回調中傳入進度參數(shù)*/
xhr.upload.addEventListener('progress',uploadProgress, false); // 第三個參數(shù)為useCapture?，是否使用事件捕獲/冒泡
/*
* 監(jiān)聽readyState的變化浮定，完成時回調后端返回的response
* */
xhr.addEventListener('readystatechange',function(e){
console.log(e);
let response=e.currentTarget.response?JSON.parse(e.currentTarget.response):null;
if (e.currentTarget.readyState===4&&response) {
callback(100,response);
xhr.upload.removeEventListener('progress', uploadProgress, false)
}
},false);
xhr.open('POST', url, true); // 第三個參數(shù)為async?相满，異步/同步
xhr.setRequestHeader("accessToken",token);
xhr.send(form);
}
export default {
uploadForImage:uploadForImage//原生js開始上傳并監(jiān)聽上傳進度
};
