重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家介绍怎么在antd组件中使用Upload实现自己上传,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、成都做网站、外贸营销网站建设、鹿邑网络推广、成都微信小程序、鹿邑网络营销、鹿邑企业策划、鹿邑品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供鹿邑建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
//添加按钮的样式 const uploadButton = (); Uploadfalse} //数据,即图片,是一个数组 fileList={fileList} //当点击查看时调用(上图的那个眼睛) onPreview={this.handlePreview} //数据改变时调用 onChange={this.handleChange} > //当不少于一张图时,不显示怎加图片的按钮。 {fileList.length >= 1 ? null : uploadButton}
还有一个移除时调用的函数onRemove(),即点击上图的垃圾桶,这里没有定义。
handlePreview = (file) => { this.setState({ previewImage: file.url || file.thumbUrl, visible: true, }); };
利用Modal显示图片。
handleChange = ({ fileList }) => { this.setState({ fileList }); };
数据改变时直接重设fileList数组的值(我这里只有一张图可以这么做)。
最后是fileList的一些基本设置:
fileList: [{ uid: 'id', name: '标题', //目前的状态 status: 'done', //图片的url或者base64 url: '', type: 'image/jpeg', }],
PS:基于antd的上传文件进度条
核心代码
//通过前端原生XMLHttpRequest动态获取上传文件进度 doTransferFile = (file) => { let mySelf = this; let formData = new FormData(); let url = "http://xxx:444/upload_file.php"; let file = document.getElementById("chooseFile").files[0]; console.log(file) formData.append("file",file); // console.log(modal); // console.log(formData); // return false; /* eslint-disable */ $.ajax({ url : url, type : 'POST', enctype: 'multipart/form-data', data : formData, // 告诉jQuery不要去处理发送的数据 processData : false, // 告诉jQuery不要去设置Content-Type请求头 contentType : false, timeout : 60000,//设置超时时间 beforeSend:function(){ console.log("现在开始上传文件!"); notification['info']({ message: '提示', description: '现在开始上传文件!', }); }, xhr: function(){ let myXhr = $.ajaxSettings.xhr(); // console.log(myXhr) if(myXhr.upload){ myXhr.upload.addEventListener('progress',function(e) { if (e.lengthComputable) { let percent = Math.floor((e.loaded/e.total)*100); // console.log(e.loaded) // console.log(e.total) console.log(percent) let upload = mySelf.state.upload; upload.progress.loaded = e.loaded; upload.progress.total = e.total; upload.progress.percentage = percent; mySelf.state.upload = upload; // console.log(info); mySelf.setState({ upload: upload }); } },false); myXhr.upload.addEventListener('load',function(e) { console.log('fish') },false); } return myXhr; }, success : function(res) { console.log(res) }, error : function(res) { } }); };
关于怎么在antd组件中使用Upload实现自己上传就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。