antd组件Upload实现自己上传的实现示例


Posted in Javascript onDecember 18, 2018

前言

在实现图片上传时,可能需要用到Upload,但是它默认的上传方式是加入图片后直接上传,如果要实现最后再一次性上传,需要自定义内容。

antd组件Upload实现自己上传的实现示例antd组件Upload实现自己上传的实现示例

//添加按钮的样式
const uploadButton = (
  <div>
  <Icon type="plus" />
  <div className="ant-upload-text">Upload</div>
  </div>
 );


<Upload
    //样式
    className={styles['override-ant-btn']}
    //陈列样式,现在是卡片式
    listType="picture-card"
    //再图片上传到页面后执行的函数,自定义让他不执行
    beforeUpload={() => false}
    //数据,即图片,是一个数组
    fileList={fileList}
    //当点击查看时调用(上图的那个眼睛)
    onPreview={this.handlePreview}
    //数据改变时调用
    onChange={this.handleChange}
   >
    //当不少于一张图时,不显示怎加图片的按钮。
    {fileList.length >= 1 ? null : uploadButton}
   </Upload>

还有一个移除时调用的函数onRemove(),即点击上图的垃圾桶,这里没有定义。

handlePreview = (file) => {
 this.setState({
  previewImage: file.url || file.thumbUrl,
  visible: true,
 });
 };


  <Modal visible={visible} footer={null} onCancel={this.handleCancel}>
    <img alt="加载" style={{ width: '100%',height: '100%' }} src={previewImage} />
  </Modal>

利用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框架下,调用的Progress组件动态展示的上传文件进度,效果图如下,待全部上传成功后,由接口返回上传文件的大小,路径等信息,render到页面上

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
微信小程序解除10个请求并发限制
Dec 18 #Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 #Javascript
vue中引入第三方字体文件的方法示例
Dec 17 #Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 #Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 #Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 #Javascript
详解Vue This$Store总结
Dec 17 #Javascript
You might like
第六节--访问属性和方法
2006/11/16 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python操作CouchDB的方法
2014/10/08 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
大学生个人自荐信
2014/02/24 职场文书
高中军训感言500字
2014/02/24 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
软件测试专业推荐信
2014/09/18 职场文书
社区服务活动感想
2015/08/11 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python