前言

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

//添加按钮的样式const uploadButton=(div Icon类型=' plus '/div类名=' ant-upload-text ' upload/div/div)；上传//样式类名={ style[' override-ant-BTN ']}//陈列样式，现在是卡片式列表类型='图片卡'//再图片上传到页面后执行的函数，自定义让他不执行beforeUpload={()=false} //数据，即图片，是一个数组文件列表={文件列表} //当点击查看时调用（上图的那个眼睛)OnPreview={ this。handlePreview }//数据改变时调用onChange={this.handleChange} //当不少于一张图时，不显示怎加图片的按钮{fileList.length=1？空：上传按钮}/上传还有一个移除时调用的函数onRemove()，即点击上图的垃圾桶，这里没有定义。

handlePreview=(文件)={ this。setstate({ previewimage :文件。网址| |文件。thumb URL，visible: true，})；};modal visible={ visible } footer={ null } onCancel={ this。handlecancel } img alt='加载style={{ width: '100% '，height : ' 100% ' } } src={ previewImage }//Modal利用情态的显示图片。

handleChange=({文件列表})={ this。setstate({文件列表})；};数据改变时直接重设文件列表数组的值（我这里只有一张图可以这么做)。

最后是文件列表的一些基本设置：

文件列表： [{ uid: 'id '，名称： '标题', //目前的状态状态： "完成",//图片的全球资源定位器(统一资源定位符)或者base64 url: ' '，type: 'image/jpeg '，}]，PS:基于安特德的上传文件进度条

核心代码

//通过前端原生XMLHttpRequest动态获取上传文件进度doTransferFile=(文件)={ 0让我自己=这个；让formData=new formData()；让URL=' http://xxxx :444/upload _ file。PHP '；让文件=文档。getelementbyid('选择文件').文件[0];console.log(文件)formData.append('file '，file)；//console.log(模态);//控制台。日志(表单数据)；//返回false/* eslint-disable */$ .ajax({ url : url，类型： 'POST '，enctype : ' multipart/form-data '，data : formData，//告诉框架不要去处理发送的数据processData : false，//告诉框架不要去设置内容类型请求头contentType : false，超时： 60000,//设置超时时间在发送： FuncTion(){ console }之前。日志('现在开始上传文件!');通知['信息]({消息： }提示，描述： '现在开始上传文件!', });}，xhr:函数(){让myXhr=$。AJaxsettings。xhr()；//控制台。log(myXhr)if(myXhr。上传){ myXhr。上传。addeventlistener(' progress ')，函数(e){ if(e . length computable){ let percent=math。地板((满载/满载总数)* 100)；//控制台。日志(已加载)//控制台。日志控制台。日志(百分比)让upload=MeMBer。国家。上传；上传。进步。loaded=e . loaded上传。进步。总计=e .总计；上传。进步。百分比=百分比；Self.state.upload=上传；//console.log(信息);莫梅尔。SetState({ upload : upload })；} }，false)；麦瑟尔。上传。addeventlistener(' load '，函数(e) { console.log('fish') }，false)；}返回myXhr}，成功：函数{ console.log(res) }，错误：函数(RES){ } })；};在安特德框架下，调用的进步组件动态展示的上传文件进度，效果图如下，待全部上传成功后，由接口返回上传文件的大小，路径等信息，渲染到页面上

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。