南通市建设工程安全监督站网站,监控企业网站模板,北京门头沟山洪暴发,初次安装宽带要多少钱今天要分享的是使用这俩个UI组件库的upload组件分别实现调用组件本身的上传方法实现和后台交互。接下来就是开车的时间#xff0c;请坐稳扶好~
一、element upload组件传送门 1、html文件
el-upload refuploadRef :actionuploadUrl :data…今天要分享的是使用这俩个UI组件库的upload组件分别实现调用组件本身的上传方法实现和后台交互。接下来就是开车的时间请坐稳扶好~
一、element upload组件传送门 1、html文件
el-upload refuploadRef :actionuploadUrl :datadataObj :multipletrue :before-uploadbeforeUpload:on-successhandleSuccess :auto-uploadfalsetemplate #triggerel-button typeprimary文件选择Icon typemd-arrow-round-up //el-button/templateel-button clicksubmitUpload确认上传Icon typemd-arrow-round-up //el-button
/el-upload
注意事项 使用组件本身的上传事件必须加auto-upload属性设置为false beforeUpload方法除校验外外层不允许返回return false 2、js文件
export default {methods: {beforeUpload(file) {console.log(文件, file)// 上传文件接口额外参数this.dataObj.businessCode ISSUEPOINT;this.dataObj.salesType SALES12const { name, size } file;const index name.lastIndexOf(.);// 判断文件名是否有后缀没后缀文件错误if(index -1) {this.$notify.error({title: 错误,message: 文件错误请重新上传,});return false;}const fileType name.substr(index 1);const acceptFileTypes [txt, zip, rar];// 判断文件类型if(!acceptFileTypes.includes(fileType)) {this.$notify.error({title: 错误,message: 文件类型错误请重新上传,});return false;}// 判断文件大小if(size 10*1024*1024) {this.$notify.error({title: 错误,message: 文件大小超过10M请重新上传,});return false;}this.fileLists.push(file)},submitUpload() {//使用ref调用组件本身的submit方法上传文件this.$refs.uploadRef.submit()}}
}
二、iview upload 组件传送门 1、html文件
Upload refupload :multipletrue :actionuploadUrl :datafileUploadObj :before- uploadbeforeUpload :on-successhandleSuccess :auto-uploadfalse :show-upload- listfalse
Button选择文件Icon typemd-arrow-round-up //Button
/Upload
注意使用iview upload组件调取自身上传方法beforeUpload方法必须要返回false和element upload相反
2、js文件
export default {methods: {beforeUpload(file) {console.log(文件, file)// 上传文件接口额外参数this.dataObj.businessCode ISSUEPOINT;this.dataObj.salesType SALES12// 上传文件其他的校验方法let imgTypeArr [image/png, image/jpg, image/jpeg,image/gif]let imgType imgTypeArr.indexOf(file.type) ! -1if (!imgType) {this.$Message.warning({content: 文件 res.name 格式不正确, 请选择格式正确的图片,duration: 5});return false}// 控制文件上传大小let imgSize localStorage.getItem(file_size_max);//获取缓存的文件大小限制字段let Maxsize res.size imgSize;let fileMax imgSize/ 1024 / 1024;if (!Maxsize) {this.$Message.warning({content: 文件体积过大,图片大小不能超过 fileMax M,duration: 5});return false}this.fileLists.push(file)//关键点return false},submitUpload() {//使用ref调用组件本身的post方法上传文件let _this thisthis.fileLists.forEach(n {_this.$refs.upload.post(n)})}}
}
本次组件分享完毕欢迎小伙伴组团交流~
