vue-image-crop-upload图片格式验证BUG问题

最新推荐文章于 2025-11-24 03:44:17 发布
原创 最新推荐文章于 2025-11-24 03:44:17 发布 · 185 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #bug #前端

针对vue-image-crop-upload组件，在上传小于200*200尺寸的图片时出现验证失效的问题进行了修复。通过将upload-3.vue文件中的v-show修改为v-if解决此问题。

vue-image-crop-upload图片格式错误验证BUG

该插件是一款GitHub上的 裁剪组件支持vue1x vue2x vue3x

在这里插入图片描述
在GitHub搜索栏直接搜到，目前已经有2k星星了

在使用中发现一个bug

在这里插入图片描述

当上传了一张格式错误的图片比如 200*200以下的图片时会出现错误验证提示

然后点击取消按钮

在这里插入图片描述

再打开

在这里插入图片描述

再上传一张同样的200*200以下的图片 该格式验证就会全部失效

在这里插入图片描述

通过打开node_modules下面找到vue-image-crop-upload打开upload-3.vue文件

在这里插入图片描述

把v-show=“modelValue” 改为 v-if=“modelValue” 就解决了

目前再官方实例中也存在该BUG，还未修复

vue3 - 超详细头像裁剪并上传到服务器，支持按照自定义比例裁切图片效果组件插件（详细示例源码教程，一键复制运行开箱即用）
高级前端工程师
05-05 4964
vue3头像裁剪，vue3上传头像并裁剪，vue3裁剪头像及上传服务器，vue3头像的裁剪功能示例源码，vue3最好用的头像裁剪组件，vue3如何实现头像上传后按比例进行裁剪，vue3+ts实现图片裁剪上传(像素裁剪,比例裁剪)，vue3上传图像进行裁剪，vue3将图片进行裁切的示例功能，vue3 element plus 组件库upload上传组件怎么接入裁剪插件，vue3图片图像头像的裁剪裁切插件组件，Vue3中实现选取头像并裁剪，element plus 组件库upload上传组件怎么能先裁剪再上传，
vue集成iconfont、fontawesome和图标选择器（含fontawesome、el-icon和加入的iconfont）
GeniusXYT的博客
06-23 3514
一、将图标加入购物车 阿里巴巴矢量图标库： 二、新建（添加至）项目 右上角的购物车 → 添加至项目 → 进入到项目页面 三、下载后项目中引入 点击下载至本地，解压缩包，只需要这四个文件 此时.ttf和.woff文件已经保存了前面步骤的图标，将其复制于 src/assets/iconfont （看个人爱好） 然后main.js全局引入这个css就行 // 引入自定义iconfont import "@/assets/iconfont/iconfont.css"; 在iconfont.css文件中
vue-image-crop-upload 头像/图片上传组件
qq_43059898的博客
08-04 1619
安装 npm install vue-image-crop-upload npm install –save-dev babel-polyfill 示列 1 2 3 <button class=“btn” @click=“toggleShow”>设置头像 4 <my-upload 5 @crop-success=“cropSuccess” 6 @crop-upload-success=“cropUploadSuccess” 7 @crop-u
渗透测试的介绍和防范
qq_57558631的博客
05-27 1525
跨站脚本攻击 跨站脚本攻击是指攻击者将具有恶意目的的数据潜入到远程用户信任的WEB页面的HTML 代码中，当该页面被浏览器下载运行时嵌入的脚本将被执行，用户页面被跳转到攻击者精心编织的其他页面，用户毫无顾及的填写各种敏感信息，殊不知已被攻击者盗取或被站点挂马控制。 XSS攻击是什么 XSS是跨站脚本攻击的缩写，是一种网站应用程序的安全漏洞攻击，是代码注入的一种。 通常是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。 这些恶意网页程..
vue用upload标签上传图片限制图片属性
qq_44078850的博客
06-06 1257
限制上传图片类型和大小属性
Vue2.0实现可裁剪图片使用vue-image-crop-upload插件上传失败
weixin_43716338的博客
06-01 351
Vue2.0实现可裁剪图片使用vue-image-crop-upload插件上传失败
Vue中有哪些图片编辑和预览的组件？
猫头虎技术团队：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作+：Libin9iOak ，万粉变现+：优快云WF，猫头虎承诺每年免费为100名C站创作者做账号流量诊断服务！全网搜：猫头虎技术团队，点击文章底部名片或直接私信我一切皆可谈，快找虎哥！
01-10 2179
Vue中有哪些图片编辑和预览的组件？ 在现代 Web 应用中，图片编辑和预览是常见需求之一。Vue 作为一个流行的前端框架，生态系统中也有许多优秀的图片编辑和预览组件，它们能帮助开发者快速实现这些功能。本文将从以下几个方面展开讨论： 图片编辑和预览的常见需求 Vue 社区中的流行组件推荐 组件对比分析 示例代码与应用场景
Vue2.0实现可裁剪图片并上传到腾讯COS
weixin_43716338的博客
06-01 924
Vue2.0实现可裁剪图片并上传到腾讯COS
VUE项目头像裁剪功能（个人项目）
weixin_45857357的博客
12-20 416
VUE项目头像裁剪
分享一款 Vue 图片编辑插件
李赛赛的专栏
12-01 3072
💥本篇文章给大家分享一款强大到没朋友的Vue图片编辑插件，可以对图片进行旋转、缩放、裁剪、涂鸦、标注、添加文本等，快来试试并收藏吧！💕
<u-upload :fileList="uploadList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="uploadCount"></u-upload> <gmy-img-cropper v-if="showCropper" ref="gmyImgCropper" quality="1" @getImg="handleCropConfirm" :imgSrc="selectedImage"></gmy-img-cropper>设置showCropper为true了，但是上传图片没出来 async afterRead(event) { let lists = [].concat(event.file); let fileListLen = this.uploadList.length; for (let item of lists) { try { console.log(`原始文件大小：${item.size} 字节`, "item.size"); let fileToUpload = item.url; if (this.compress && this.shouldCompress(item)) { console.log("开始压缩图片", this.compress); fileToUpload = await this.compressImage(item.url); } if (this.cropimage) { console.log("1jin"); this.showCropper = true // fileToUpload = await this.cropImage(item.url); } uni.showLoading({ title: "上传中，请稍后", mask: true }); const result = await this.uploadFilePromise(fileToUpload) const response = JSON.parse(result); let currentItem = this[`uploadList`][fileListLen]; this.uploadList.splice(fileListLen, 1, { ...currentItem, status: "success", message: "请稍后", url: response.data.url, }); uni.hideLoading() } catch (error) { console.error("Error processing image:", error) } fileListLen++; } this.$emit("change", this.uploadList); },
03-28
好的，我现在需要解决用户在使用vue的u-upload组件结合gmy-img-cropper时，设置了showCropper为true但上传图片后裁剪界面没有显示的问题。首先，我得先理清楚可能的原因有哪些。根据用户提供的引用内容，特别是引用...
上面的是我的项目结构，现在我想要加入开源的通义大模型，实现项目具有以下功能 自行准备本地知识库资料(如本专业相关资料内容)作为大模型本地知识库的输入 教师侧：备课与设计： 根据所提供的本地课程大纲、课程知识库文档等自动设计教学内容，包括知识讲解、实训练习与指导、时间分布等。 · 考核内容生成： 根据教学内容自动生成考核题目及参考答案，考核题目种类可多样化，根据学科设计，如计算机类可设计相关编程题和答案 · 学情数据分析： 对学生提交的答案进行自动化检测，提供错误定位与修正建议。对学生整体数据进行分析，总结知识掌握情况与教学建议。 学生侧： · 在线学习助手： 对学生的提出的问题，结合教学内容进行解答; · 实时练习评测助手： 根据学生历史练习情况，以及学生的练习要求，生成随练题目，并对练习纠错。 管理侧： 用户管理：管理员/教师/学生等用户的基本管理 课件资源管理：按学科列表教师备课产生的课件、练习等资源，可以导出。 大屏概览： · 教师使用次数统计/活跃板块(当日/本周) · 学生使用次数统计/活跃板块(当日/本周) · 教学效率指数(备课与修正耗时、课后练习设计与修正耗时、课程优化方向(如：某学科通过率持续偏低) · 学生学习效果(平均正确率趋势、知识点掌握情况，高频错误知识点等) 非功能性需求 需明确使用至少1个开源大模型作为核心技术组件; 需采用本地知识库作为输入，知识库资料总量不大于100M; 生成的内容、练习与答案与本地知识库的关联性和准确性;(对抽取知识点设计的题目验证关联性和与答案的准确性有知识点说明) 我该在哪里添加 下面我再对功能进行进一步的说明：1、首先本地知识库可以让用户自己上传（即用户自己可以控制本地知识库，但一开始会有一个默认的知识库，知识库是在项目中的某个目录中可以吗）， 2、在备课与设计的功能上ai可以帮助教师设计教学内容，并且教师可以下载该教学内容 3、在考核内容生成中，考核题目同样可以进行下载，而且可以有带答案不带答案两种方式； 完整的项目结构又是怎样的，哪些内容需要更改 下面是我目前的项目结构卷 Windows-SSD 的文件夹 PATH 列表 卷序列号为 20C7-404E C:. | project_structure.txt | +---main | +---java | | \---com | | | Aiapp1Application.java | | | | | +---annotation | | | APPLoginUser.java | | | IgnoreAuth.java | | | LoginUser.java | | | | | +---config | | | InterceptorConfig.java | | | MybatisPlusConfig.java | | | MyMetaObjectHandler.java | | | | | +---controller | | | CommonController.java | | | ConfigController.java | | | DictionaryController.java | | | ExampaperController.java | | | ExamquestionController.java | | | ExamrecordController.java | | | ExamredetailsController.java | | | ExamrewrongquestionController.java | | | FileController.java | | | ForumController.java | | | JiaoshiController.java | | | KechengController.java | | | KechengLiuyanController.java | | | NewsController.java | | | UsersController.java | | | YonghuController.java | | | | | +---dao | | | CommonDao.java | | | ConfigDao.java | | | DictionaryDao.java | | | ExampaperDao.java | | | ExamquestionDao.java | | | ExamrecordDao.java | | | ExamredetailsDao.java | | | ExamrewrongquestionDao.java | | | ForumDao.java | | | JiaoshiDao.java | | | KechengDao.java | | | KechengLiuyanDao.java | | | NewsDao.java | | | TokenDao.java | | | UsersDao.java | | | YonghuDao.java | | | | | +---entity | | | | ConfigEntity.java | | | | DictionaryEntity.java | | | | EIException.java | | | | ExampaperEntity.java | | | | ExamquestionEntity.java | | | | ExamrecordEntity.java | | | | ExamredetailsEntity.java | | | | ExamrewrongquestionEntity.java | | | | ForumEntity.java | | | | JiaoshiEntity.java | | | | KechengEntity.java | | | | KechengLiuyanEntity.java | | | | NewsEntity.java | | | | TokenEntity.java | | | | UsersEntity.java | | | | YonghuEntity.java | | | | | | | +---model | | | | DictionaryModel.java | | | | ExampaperModel.java | | | | ExamquestionModel.java | | | | ExamrecordModel.java | | | | ExamredetailsModel.java | | | | ExamrewrongquestionModel.java | | | | ForumModel.java | | | | JiaoshiModel.java | | | | KechengLiuyanModel.java | | | | KechengModel.java | | | | NewsModel.java | | | | YonghuModel.java | | | | | | | +---view | | | | DictionaryView.java | | | | ExampaperView.java | | | | ExamquestionView.java | | | | ExamrecordView.java | | | | ExamredetailsView.java | | | | ExamrewrongquestionView.java | | | | ForumView.java | | | | JiaoshiView.java | | | | KechengLiuyanView.java | | | | KechengView.java | | | | NewsView.java | | | | YonghuView.java | | | | | | | \---vo | | | DictionaryVO.java | | | ExampaperVO.java | | | ExamquestionVO.java | | | ExamrecordVO.java | | | ExamredetailsVO.java | | | ExamrewrongquestionVO.java | | | ForumVO.java | | | JiaoshiVO.java | | | KechengLiuyanVO.java | | | KechengVO.java | | | NewsVO.java | | | YonghuVO.java | | | | | +---interceptor | | | AuthorizationInterceptor.java | | | | | +---model | | | \---enums | | | TypeEnum.java | | | | | +---service | | | | CommonService.java | | | | ConfigService.java | | | | DictionaryService.java | | | | ExampaperService.java | | | | ExamquestionService.java | | | | ExamrecordService.java | | | | ExamredetailsService.java | | | | ExamrewrongquestionService.java | | | | ForumService.java | | | | JiaoshiService.java | | | | KechengLiuyanService.java | | | | KechengService.java | | | | NewsService.java | | | | TokenService.java | | | | UsersService.java | | | | YonghuService.java | | | | | | | \---impl | | | CommonServiceImpl.java | | | ConfigServiceImpl.java | | | DictionaryServiceImpl.java | | | ExampaperServiceImpl.java | | | ExamquestionServiceImpl.java | | | ExamrecordServiceImpl.java | | | ExamredetailsServiceImpl.java | | | ExamrewrongquestionServiceImpl.java | | | ForumServiceImpl.java | | | JiaoshiServiceImpl.java | | | KechengLiuyanServiceImpl.java | | | KechengServiceImpl.java | | | NewsServiceImpl.java | | | TokenServiceImpl.java | | | UsersServiceImpl.java | | | YonghuServiceImpl.java | | | | | +---ServletContextListener | | | DictionaryServletContextListener.java | | | | | +---thread | | | MyThreadMethod.java | | | | | \---utils | | BaiduUtil.java | | CommonUtil.java | | FileUtil.java | | HttpClientUtils.java | | JQPageInfo.java | | MPUtil.java | | PageUtils.java | | PoiUtil.java | | Query.java | | R.java | | SpringContextUtils.java | | SQLFilter.java | | StringUtil.java | | ValidatorUtils.java | | | \---resources | | application.yml | | | +---front | | | index.html | | | | | +---css | | | bootstrap.min.css | | | common.css | | | front-kaoshi-style.css | | | homeworkPC.min.css | | | style.css | | | theme.css | | | | | +---elementui | | | | elementui.css | | | | elementui.js | | | | | | | \---fonts | | | element-icons.ttf | | | element-icons.woff | | | | | +---img | | | avator.png | | | banner.jpg | | | jianshe.png | | | jiaotong.png | | | line.jpg | | | nongye.png | | | seckilling.jpg | | | select.png | | | selectActive.png | | | unselect.png | | | weixin.png | | | yuan.png | | | zhifubao.png | | | zhongguo.png | | | | | +---js | | | bootstrap.AMapPositionPicker.js | | | bootstrap.min.js | | | config.js | | | jquery.js | | | utils.js | | | validate.js | | | vue.js | | | | | +---layui | | | | layui.all.js | | | | layui.js | | | | | | | +---css | | | | | layui.css | | | | | layui.mobile.css | | | | | | | | | \---modules | | | | | code.css | | | | | | | | | +---laydate | | | | | \---default | | | | | laydate.css | | | | | | | | | \---layer | | | | \---default | | | | icon-ext.png | | | | icon.png | | | | layer.css | | | | loading-0.gif | | | | loading-1.gif | | | | loading-2.gif | | | | | | | +---font | | | | iconfont.eot | | | | iconfont.svg | | | | iconfont.ttf | | | | iconfont.woff | | | | iconfont.woff2 | | | | | | | +---images | | | | \---face | | | | 0.gif | | | | 1.gif | | | | 10.gif | | | | 11.gif | | | | 12.gif | | | | 13.gif | | | | 14.gif | | | | 15.gif | | | | 16.gif | | | | 17.gif | | | | 18.gif | | | | 19.gif | | | | 2.gif | | | | 20.gif | | | | 21.gif | | | | 22.gif | | | | 23.gif | | | | 24.gif | | | | 25.gif | | | | 26.gif | | | | 27.gif | | | | 28.gif | | | | 29.gif | | | | 3.gif | | | | 30.gif | | | | 31.gif | | | | 32.gif | | | | 33.gif | | | | 34.gif | | | | 35.gif | | | | 36.gif | | | | 37.gif | | | | 38.gif | | | | 39.gif | | | | 4.gif | | | | 40.gif | | | | 41.gif | | | | 42.gif | | | | 43.gif | | | | 44.gif | | | | 45.gif | | | | 46.gif | | | | 47.gif | | | | 48.gif | | | | 49.gif | | | | 5.gif | | | | 50.gif | | | | 51.gif | | | | 52.gif | | | | 53.gif | | | | 54.gif | | | | 55.gif | | | | 56.gif | | | | 57.gif | | | | 58.gif | | | | 59.gif | | | | 6.gif | | | | 60.gif | | | | 61.gif | | | | 62.gif | | | | 63.gif | | | | 64.gif | | | | 65.gif | | | | 66.gif | | | | 67.gif | | | | 68.gif | | | | 69.gif | | | | 7.gif | | | | 70.gif | | | | 71.gif | | | | 8.gif | | | | 9.gif | | | | | | | \---lay | | | \---modules | | | carousel.js | | | code.js | | | colorpicker.js | | | element.js | | | flow.js | | | form.js | | | jquery.js | | | laydate.js | | | layedit.js | | | layer.js | | | laypage.js | | | laytpl.js | | | mobile.js | | | rate.js | | | slider.js | | | table.js | | | transfer.js | | | tree.js | | | upload.js | | | util.js | | | | | +---modules | | | | config.js | | | | | | | +---http | | | | http.js | | | | | | | +---layarea | | | | layarea.js | | | | | | | \---tinymce | | | | index.html | | | | tinymce.js | | | | | | | \---tinymce | | | | jquery.tinymce.min.js | | | | license.txt | | | | readme.md | | | | tinymce.js | | | | tinymce.min.js | | | | | | | +---langs | | | | readme.md | | | | zh_CN.js | | | | | | | +---plugins | | | | +---advlist | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---anchor | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---autolink | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---autoresize | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---autosave | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---bbcode | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---charmap | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---code | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---codesample | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---colorpicker | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---contextmenu | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---directionality | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---emoticons | | | | | | plugin.js | | | | | | plugin.min.js | | | | | | | | | | | \---js | | | | | emojis.js | | | | | emojis.min.js | | | | | | | | | +---fullpage | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---fullscreen | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---help | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---hr | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---image | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---imagetools | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---importcss | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---indent2em | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---insertdatetime | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---legacyoutput | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---link | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---lists | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---media | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---nonbreaking | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---noneditable | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---pagebreak | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---paste | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---preview | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---print | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---quickbars | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---save | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---searchreplace | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---spellchecker | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---tabfocus | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---table | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---template | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---textcolor | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---textpattern | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---toc | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---visualblocks | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | +---visualchars | | | | | plugin.js | | | | | plugin.min.js | | | | | | | | | \---wordcount | | | | plugin.js | | | | plugin.min.js | | | | | | | +---skins | | | | +---content | | | | | +---dark | | | | | | content.css | | | | | | content.min.css | | | | | | content.min.css.map | | | | | | | | | | | +---default | | | | | | content.css | | | | | | content.min.css | | | | | | content.min.css.map | | | | | | | | | | | +---document | | | | | | content.css | | | | | | content.min.css | | | | | | content.min.css.map | | | | | | | | | | | \---writer | | | | | content.css | | | | | content.min.css | | | | | content.min.css.map | | | | | | | | | \---ui | | | | +---oxide | | | | | | content.css | | | | | | content.inline.css | | | | | | content.inline.min.css | | | | | | content.inline.min.css.map | | | | | | content.min.css | | | | | | content.min.css.map | | | | | | content.mobile.css | | | | | | content.mobile.min.css | | | | | | content.mobile.min.css.map | | | | | | skin.css | | | | | | skin.min.css | | | | | | skin.min.css.map | | | | | | skin.mobile.css | | | | | | skin.mobile.min.css | | | | | | skin.mobile.min.css.map | | | | | | | | | | | \---fonts | | | | | tinymce-mobile.woff | | | | | | | | | \---oxide-dark | | | | | content.css | | | | | content.inline.css | | | | | content.inline.min.css | | | | | content.inline.min.css.map | | | | | content.min.css | | | | | content.min.css.map | | | | | content.mobile.css | | | | | content.mobile.min.css | | | | | content.mobile.min.css.map | | | | | skin.css | | | | | skin.min.css | | | | | skin.min.css.map | | | | | skin.mobile.css | | | | | skin.mobile.min.css | | | | | skin.mobile.min.css.map | | | | | | | | | \---fonts | | | | tinymce-mobile.woff | | | | | | | \---themes | | | +---mobile | | | | theme.js | | | | theme.min.js | | | | | | | \---silver | | | theme.js | | | theme.min.js | | | | | +---pages | | | +---chat | | | | chat.html | | | | | | | +---dictionary | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---exampaper | | | | add.html | | | | detail.html | | | | exam.html | | | | list.html | | | | | | | +---examquestion | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---examrecord | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---examredetails | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---examrewrongquestion | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---forum | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---home | | | | home.html | | | | | | | +---jiaoshi | | | | add.html | | | | center.html | | | | detail.html | | | | list.html | | | | register.html | | | | | | | +---kecheng | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---kechengLiuyan | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---login | | | | login.html | | | | | | | +---news | | | | add.html | | | | detail.html | | | | list.html | | | | | | | +---recharge | | | | recharge.html | | | | | | | \---yonghu | | | add.html | | | center.html | | | detail.html | | | list.html | | | register.html | | | | | \---xznstatic | | +---css | | | | bootstrap.min.css | | | | common.css | | | | element.min.css | | | | login.css | | | | public.css | | | | style.css | | | | swiper.min.css | | | | | | | \---fonts | | | element-icons.ttf | | | element-icons.woff | | | | | +---img | | | 162237296.jpg | | | 162240878.jpg | | | 19.jpg | | | 1_092ZZ2503138.jpg | | | 20.jpg | | | index_24.gif | | | index_35.gif | | | index_41.gif | | | index_44.gif | | | logo.png | | | news_list_time.jpg | | | service_btn.png | | | service_img.png | | | service_title.png | | | | | \---js | | bootstrap.min.js | | element.min.js | | index.js | | jquery-1.11.3.min.js | | jquery.SuperSlide.2.1.1.js | | swiper.min.js | | | +---img | | \---img | | back-img-bg.jpg | | front-img-bg.jpg | | logo.jpg | | | +---mapper | | CommonDao.xml | | ConfigDao.xml | | DictionaryDao.xml | | ExampaperDao.xml | | ExamquestionDao.xml | | ExamrecordDao.xml | | ExamredetailsDao.xml | | ExamrewrongquestionDao.xml | | ForumDao.xml | | JiaoshiDao.xml | | KechengDao.xml | | KechengLiuyanDao.xml | | NewsDao.xml | | TokenDao.xml | | UsersDao.xml | | YonghuDao.xml | | | +---static | | +---admin | | | | 1-install.bat | | | | 2-run.bat | | | | 3-build.bat | | | | babel.config.js | | | | package-lock.json | | | | package.json | | | | vue.config.js | | | | | | | +---dist | | | | | favicon.ico | | | | | index.html | | | | | | | | | +---css | | | | | app.381d2044.css | | | | | chunk-vendors.a72b0961.css | | | | | | | | | +---fonts | | | | | element-icons.535877f5.woff | | | | | element-icons.732389de.ttf | | | | | | | | | +---img | | | | | 404.3648f234.png | | | | | zhongguo.20798bfa.png | | | | | | | | | \---js | | | | app.b100d28f.js | | | | app.b100d28f.js.map | | | | chunk-vendors.213b68ba.js | | | | chunk-vendors.213b68ba.js.map | | | | | | | +---public | | | | favicon.ico | | | | index.html | | | | | | | \---src | | | | App.vue | | | | main.js | | | | | | | +---assets | | | | +---css | | | | | element-variables.scss | | | | | style.scss | | | | | | | | | \---img | | | | | 404.png | | | | | avator.png | | | | | bg.jpg | | | | | captcha.jpg | | | | | login.png | | | | | logo.png | | | | | password.png | | | | | role.png | | | | | username.png | | | | | | | | | \---test | | | | jianshe.png | | | | jiaotong.png | | | | nongye.png | | | | weixin.png | | | | zhifubao.png | | | | zhongguo.png | | | | | | | +---components | | | | +---common | | | | | BreadCrumbs.vue | | | | | Editor.vue | | | | | FileUpload.vue | | | | | | | | | +---home | | | | | HomeCard.vue | | | | | HomeChart.vue | | | | | HomeComment.vue | | | | | HomeProgress.vue | | | | | | | | | +---index | | | | | IndexAside.vue | | | | | IndexAsideStatic.vue | | | | | IndexAsideSub.vue | | | | | IndexHeader.vue | | | | | IndexMain.vue | | | | | | | | | \---SvgIcon | | | | index.vue | | | | | | | +---icons | | | | | index.js | | | | | svgo.yml | | | | | | | | | \---svg | | | | | 404.svg | | | | | articleEdit.svg | | | | | banner.svg | | | | | bug.svg | | | | | build.svg | | | | | cfg.svg | | | | | channel.svg | | | | | chart.svg | | | | | clipboard.svg | | | | | code.svg | | | | | component.svg | | | | | contacts.svg | | | | | dashboard.svg | | | | | date.svg | | | | | dept.svg | | | | | dict.svg | | | | | documentation.svg | | | | | download.svg | | | | | drag.svg | | | | | druid.svg | | | | | edit.svg | | | | | education.svg | | | | | email.svg | | | | | excel.svg | | | | | exit-fullscreen.svg | | | | | eye-open.svg | | | | | file.svg | | | | | form.svg | | | | | fullscreen.svg | | | | | icon.svg | | | | | international.svg | | | | | job.svg | | | | | language.svg | | | | | link.svg | | | | | list.svg | | | | | lock.svg | | | | | log.svg | | | | | logininfor.svg | | | | | menu.svg | | | | | message.svg | | | | | money.svg | | | | | monitor.svg | | | | | nested.svg | | | | | nested0.svg | | | | | online.svg | | | | | operation.svg | | | | | password.svg | | | | | password0.svg | | | | | pdf.svg | | | | | people.svg | | | | | peoples.svg | | | | | phone.svg | | | | | post.svg | | | | | qq.svg | | | | | search.svg | | | | | sender.svg | | | | | server.svg | | | | | shopping.svg | | | | | shoppingCard.svg | | | | | size.svg | | | | | skill.svg | | | | | star.svg | | | | | swagger.svg | | | | | system.svg | | | | | tab.svg | | | | | table.svg | | | | | table0.svg | | | | | task.svg | | | | | template.svg | | | | | theme.svg | | | | | tool.svg | | | | | tree-table.svg | | | | | tree.svg | | | | | user.svg | | | | | user0.svg | | | | | validCode.svg | | | | | wechat.svg | | | | | zip.svg | | | | | | | | | \---svg | | | | agricultureRegister.svg | | | | AI.svg | | | | AIDeviceLayout.svg | | | | area.svg | | | | base.svg | | | | batch.svg | | | | board.svg | | | | board1.svg | | | | boardConfig.svg | | | | cfg.svg | | | | code.svg | | | | company.svg | | | | crop.svg | | | | crops.svg | | | | dashboard.svg | | | | dataAbnormal.svg | | | | dataLack.svg | | | | dept.svg | | | | device.svg | | | | deviceMonitorData.svg | | | | dict.svg | | | | diseasesinsect.svg | | | | diseasesinsects.svg | | | | documentation.svg | | | | EIM.svg | | | | email.svg | | | | environmental.svg | | | | eye-open.svg | | | | farmingProject.svg | | | | finance.svg | | | | financeBudget.svg | | | | financeReality.svg | | | | firm.svg | | | | firms.svg | | | | harvestBatch.svg | | | | harvestDetection.svg | | | | harvestManage.svg | | | | harvestWorks.svg | | | | heavyMetalDetection.svg | | | | home.svg | | | | inspection.svg | | | | internet.svg | | | | internetActive.svg | | | | log.svg | | | | mainSystem.svg | | | | mainSystemActive.svg | | | | menu.svg | | | | monitorEquipment.svg | | | | news.svg | | | | order.svg | | | | password.svg | | | | peoples.svg | | | | pest.svg | | | | pestActive.svg | | | | pesticideResidue.svg | | | | pests.svg | | | | phone.svg | | | | plant.svg | | | | plants.svg | | | | plantsActive.svg | | | | residual.svg | | | | retroactiveCoding.svg | | | | scheme.svg | | | | source.svg | | | | sourceActive.svg | | | | system.svg | | | | task.svg | | | | tempFarm.svg | | | | traceability.svg | | | | traceabilityList.svg | | | | traceabilityStyle.svg | | | | user.svg | | | | user0.svg | | | | validCode.svg | | | | video.svg | | | | videoEquipment.svg | | | | videoKey.svg | | | | VIP.svg | | | | vipCustomized.svg | | | | warnings.svg | | | | workOrder.svg | | | | ┐┤?х╣▄└э.svg | | | | ╓╪╜Ё╩?╝ь▓т╣▄└э.svg | | | | | | | +---router | | | | router-static.js | | | | | | | +---store | | | | store.js | | | | | | | +---utils | | | | api.js | | | | base.js | | | | http.js | | | | i18n.js | | | | menu.js | | | | storage.js | | | | style.css | | | | style.js | | | | utils.js | | | | validate.js | | | | | | | \---views | | | | 404.vue | | | | center.vue | | | | home.vue | | | | index.vue | | | | login.vue | | | | pay.vue | | | | register.vue | | | | update-password.vue | | | | | | | \---modules | | | +---config | | | | add-or-update.vue | | | | list.vue | | | | | | | +---dictionary | | | | add-or-update.vue | | | | list.vue | | | | | | | +---dictionaryExampaper | | | | add-or-update.vue | | | | list.vue | | | | | | | +---dictionaryExamquestion | | | | add-or-update.vue | | | | list.vue | | | | | | | +---dictionaryForumState | | | | add-or-update.vue | | | | list.vue | | | | | | | +---dictionaryKecheng | | | | add-or-update.vue | | | | list.vue | | | | | | | +---dictionaryNews | | | | add-or-update.vue | | | | list.vue | | | | | | | +---dictionarySex | | | | add-or-update.vue | | | | list.vue | | | | | | | +---exampaper | | | | add-or-update.vue | | | | exam.vue | | | | list.vue | | | | | | | +---examquestion | | | | add-or-update.vue | | | | list.vue | | | | | | | +---examrecord | | | | add-or-update.vue | | | | list.vue | | | | | | | +---examredetails | | | | add-or-update.vue | | | | list.vue | | | | | | | +---examrewrongquestion | | | | add-or-update.vue | | | | list.vue | | | | | | | +---forum | | | | add-or-update.vue | | | | list.vue | | | | | | | +---jiaoshi | | | | add-or-update.vue | | | | list.vue | | | | | | | +---kecheng | | | | add-or-update.vue | | | | list.vue | | | | | | | +---kechengLiuyan | | | | add-or-update.vue | | | | list.vue | | | | | | | +---news | | | | add-or-update.vue | | | | list.vue | | | | | | | +---users | | | | add-or-update.vue | | | | list.vue | | | | | | | \---yonghu | | | add-or-update.vue | | | list.vue | | | | | \---upload | | a.txt | | config1.jpg | | config2.jpg | | config3.jpg | | file.rar | | jiaoshi.xls | | jiaoshi1.jpg | | jiaoshi2.jpg | | jiaoshi3.jpg | | jiaoshi4.jpg | | jiaoshi5.jpg | | jiaoshi6.jpg | | kecheng1.jpg | | kecheng2.jpg | | kecheng3.jpg | | kecheng4.jpg | | kecheng5.jpg | | kecheng6.jpg | | music.mp3 | | news1.jpg | | news2.jpg | | news3.jpg | | news4.jpg | | news5.jpg | | news6.jpg | | video.mp4 | | yonghu1.jpg | | yonghu2.jpg | | yonghu3.jpg | | | \---templates \---test \---java \---com Aiapp1ApplicationTests.java
07-15
- 用户上传知识库：存储在服务器文件系统中（如`upload/knowledge`），并在数据库中记录知识库文件信息（可能需要新建实体和表）。 3. **教师侧功能**： - 在`controller`包下新建`TeacherAIController`，处理...
基于spring+vue把图片文件上传至阿里云oss容器并回显
2301_77170676的博客
11-21 521
本文介绍了基于Element UI的文件上传组件实现和阿里云OSS存储的后端处理。前端使用el-upload组件配置了文件上传接口、请求头、上传前后回调方法等属性。后端通过ossUtil工具类实现文件上传到阿里云OSS，包含Endpoint、AccessKey等必要配置参数，以及处理异常情况。最后通过Controller接收前端上传的文件，生成随机文件名后调用OSS工具类上传，返回文件访问URL。整个流程实现了从前端上传到云端存储的完整解决方案。
Vue3项目实战
2509_93946337的博客
11-24 342
还有个细节，Pinia的store里用actions定义方法时，不用写commit了，直接赋值就行，比Vuex简单不少。举个实际例子：订单列表页需要支持按状态筛选和导出Excel，我单独建了个useOrderTable.js，里面用ref存筛选条件，computed处理过滤后的数据，onMounted里调接口初始化。我在用户管理模块里试过，把一个权限列表从数组改成树结构，用reactive包裹后，随便增删改查都能实时渲染，连watch都不用额外配置。部署时遇到个诡异问题：开发环境跑得好好的，生产环境白屏。
Vue音频处理开发
最新发布
2509_93946247的博客
11-24 388
举个例子，在data里定义一个audioContext对象和一个isPlaying布尔值，再通过methods里的函数来触发播放或暂停，界面状态自动更新，不用手动操作DOM。另外，Vue 3的setup语法糖里，用reactive定义播放器实例，比Options API更灵活，尤其是需要动态添加音频滤镜时。记得控制帧率，太高了卡顿，太低了动画跳帧，我一般用60fps做节流。另外，音频缓冲过长会影响体验，可以用Vue的异步组件配合loading状态，先显示占位图，等解码完成再启用控制按钮。
Vue发布
2509_93943467的博客
11-24 186
以前在列表渲染成千上万条数据时，页面总会明显卡顿，但现在用新的函数处理数据，连滚动都流畅了许多。我测试了一个简单的待办应用，用Vue 3的函数配合和，代码量减少了30%，而内存占用却降低了。更惊喜的是，Tree-shaking支持现在更智能了，打包时只引入用到的功能，最终bundle大小能缩小40%以上。社区里已经涌现出许多基于Vue 3的UI库，比如PrimeVue和Quasar，它们都利用了新API的优势，组件更轻量、可定制性更强。举个例子，我以前处理用户认证时，得在多个组件里重复写登录状态的逻辑。
Vue移动应用案例
2509_93942886的博客
11-24 348
从基础的Vue核心，到路由、状态管理，再到UI组件库如Vant、NutUI，以及多端框架uni-app、Taro，工具链已经相当成熟。最初版本在千元安卓机上直接卡死，后来我们做了虚拟渲染——只渲染可视区域内的弹幕，同时用Web Worker处理弹幕数据，终于解决了卡顿。性能优化方面，除了常规的代码分割、懒加载，我们还做了很多移动端特有的优化。在移动优先的时代，Vue让前端开发者有了更多可能性。经过多个项目的实践，我总结出Vue移动开发的几个要点：组件设计要原子化，状态管理要适度，性能监控要常态化。
Vue文档
2509_93942660的博客
11-24 270
简单说，基础类型用ref，引用类型用reactive。至于emit，现在都推荐用defineEmits定义事件类型，TypeScript支持杠杠的。遇到复杂业务逻辑时，getter能帮大忙，把计算属性抽到store里，组件代码顿时清爽不少。如果组件用了v-if，这时候元素可能还没渲染，得用nextTick兜底。比如按钮重复点击问题，用v-throttle直接解决，比在每个methods里写防抖逻辑方便多了。比如v-for和v-if的优先级问题，比如key的重要性，这些看似基础的概念往往最能考验功底。
vue-image-crop-upload
03-16
vue-image-crop-upload是一个基于Vue.js的图片裁剪和上传组件。它可以让用户在前端页面上对图片进行裁剪，并将裁剪后的图片上传到服务器。该组件支持多种图片格式，包括jpg、png、gif等，并且可以自定义裁剪框的大小...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值