2023年12月7日发(作者：总为浮云能蔽日)
js实现图片上传功能，深入理解图片上传原理
js实现图片上传功能，实现的效果，先见图来压压惊
图片上传.gif
原理：
结构部分：input标签
之前你可能没有注意到，input标签还有这个作用。
属性为file
为允许选择的文件格式（如果是图片，则选择弹框里不会出现其他格式的文件），
ge回调函数的参数是我们所选择的文件对象数据。
如下：
js部分：ajax请求
通过实例化XMLHttpRequest对象，发起ajax请求，并监听进度和readyState值，获取后端返回值，完成上传。
注意：
1.该图片上传功能，可以将选择过程和上传过程分离，比如你选择了一个图片，可以预览图
片，可以多次选择和预览，最终再确认上传！
2.可以自行对代码进行修改，就可以适用于上传视频或者其他文件！
JSX:
import logo from './';
import './';
import { message,Modal,Icon,Progress } from 'antd';
import uploadFunction from "./js/uploadFunction";
class App extends Component {
constructor(props){
super(props);
={
file:{},//保存文件对象内容
src:"",//保存图片的url
progress:0,//上传进度
uploadUrl:"192.168.1.20:13003/fileDetail/upImg/1/3139",//上传地址
}
}
/*
点击上传时触发input的点击事件
*/
clickUploadBtn(){
();
}
/*
* 选择要上传的图片
* */
handleSelectFile(uploadUrl,e){
const file = [0];
if (!file) {
return;
}
let src;
// 匹配类型为image/开头的字符串
if (==="image/png"||==="image/jpeg") {
src = ObjectURL(file);
}el{
("图片上传只支持JPG/PNG格式,请重新上传！");
return;
}
if (/1024/1024>5) {
("图片上传大小不要超过5MB,请重新上传！");
return;
}
te({
file:file,
src:src
});
pload(uploadUrl,file);
}
/*
* 开始上传图片
* */
startUpload(uploadUrl,file){
let this_=this;
/*
* 调用上传图片的封装方法
* */
ForImage(
uploadUrl,
file,
function (progress,respon) {//回调函数处理进度和后端返回值
this_.tState({
progress:progress
});
if (respon&& === 200) {
s("上传成功！");
}el if (respon && !== 200) {
()
}
},
m("access_token"));
}
render() {
return (
{?
{?
{ss===100?null:
{}
percent={ss} size="small" status="active" showInfo={fal} strokeColor="#31c060" strokeWidth={3} />
}
:
className="uploadBox" onClick={(this)} >
}
ref="uploadInput" type='file' accept='image/*' style={{width:"100px",border:"none",visibility:"hidden"}} onChange={(this,Url)} />
);
}
}
export default App;
上面引入的uploadFunction函数如下:
function uploadForImage(url,data,callback,token) {//data是文件对象
let xhr = new XMLHttpRequest();
let form = new FormData();
('file', data);
function uploadProgress(e) {
if (Computable) {
let progress = (( / ) * 100);
callback(progress);
}
}
/*
* 监听请求的进度并在回调中传入进度参数*/
ntListener('progress',uploadProgress, fal); // 第三个参数为uCapture?，是否使用事件捕获/冒泡
/*
* 监听readyState的变化，完成时回调后端返回的respon
* */
ntListener('readystatechange',function(e){
(e);
let respon=?():null;
if (tate===4&&respon) {
callback(100,respon);
EventListener('progress', uploadProgress, fal)
}
},fal);
('POST', url, true); // 第三个参数为async?，异步/同步
uestHeader("accessToken",token);
(form);
}
export default {
uploadForImage:uploadForImage//原生js开始上传并监听上传进度
};
本文发布于:2023-12-07 17:57:16，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/zhishi/a/1701943036114143.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：js实现图片上传功能,深入理解图片上传原理.doc
本文 PDF 下载地址：js实现图片上传功能,深入理解图片上传原理.pdf
| 留言与评论（共有 0 条评论） |
