搜索到
2
篇与
的结果
-
RuoYi AI：一个全栈式 AI 开发平台 壹、简介RuoYi-AI是基于经典开源项目RuoYi深度扩展的AI开发平台，它不仅继承了RuoYi家族的高效开发特性，还支持对接OpenAI、C还GLM、讯飞星火等几十种大语言模型，实现了聊天对话、图像生成、语音克隆等前沿功能，成为开发者构建智能应用的“一站式”解决方案。贰、特色功能全套开源系统：提供完整的前端应用、后台管理以及小程序应用，全部开箱即用。基于MIT开源协议，自由度高，可灵活修改和分发代码。本地RAG方案：集成Milvus/Weaviate向量库、本地向量化模型、Ollama调用本地LLM，实现完全本地化RAG的高效检索与生成，保障数据隐私与性能。丰富插件功能：支持联网、SQL查询插件及Text2API插件，扩展系统能力与应用场景。内置SSE、websocket等网络协议，支持对接多种大语言模型，同时还集成了MidJourney和DALLE AI绘画功能强大的多媒体功能：支持AI翻译、PPT制作、语音克隆和翻唱等扩展功能：支持将大模型接入个人或企业微信支付功能：支持易支付、微信支付等多种支付方式三、开发部署3.1、环境要求JDK17MySQL 5.7或者 MySql 8.0Redis 5.X+Maven 3.8+NodeJS+(含pnpnm)3.2、后端安装3.2.1、Clone代码GiHub地址：https://github.com/ageerle/ruoyi-aiGitee地址：https://gitee.com/ageerle/ruoyi-ai3.2.2、Idea导入项目使用Idea导入项目并正确配置Maven，在application.yaml文件中修改数据库及Redis链接信息3.2.3、初始化数据库数据库初始化脚本位于script/sql/ruoyi-ai.sql。3.2.3、运行项目以上配置完成后，直接运行项目即可。3.3、安装管理端&客户端3.3.1、Clone代码3.3.1.1、管理端代码GiHub地址：https://github.com/ageerle/ruoyi-adminGitee地址：https://gitee.com/ageerle/ruoyi-admin3.3.1.1、客户端代码GiHub地址：https://github.com/ageerle/ruoyi-webGitee地址：https://gitee.com/ageerle/ruoyi-web3.3.2、安装依赖进入ruoyi-admin或者ruoyi-web，打开终端，执行pnpm install3.3.3、运行或打包项目运行项目：pnpm dev打包项目：pnpm build3.4、修改配置3.4.1、申请API KEYhttps://api.pandarobot.chat3.4.2、注册API KEY成功注册账号后点击添加令牌,参数可以全部默认,然后点击复制按钮可以获取API KEY3.4.3、进入后台管理配置默认账号为admin，默认密码为admin123进入运营管理-系统模型-新增模型,在请求密钥处填写上一步申请到的key信息 -
若依系统上传图片压缩 虽然标题里面有若依，实际上所有的Vue项目都能够适用的。最近基于若依系统做点东西，若依系统本身封装了一个图片上传组件ImageUpload，但是这个组件对我来说不太适用，最主要的问题就是这个组件是自动上传的，这样就会导致我们业务数据跟附件无法做到同步，比如我们新增一个单据，点了上传图片，此时图片已经上传到服务器，但是我并没有保存单据，这样就造成了部分垃圾数据。当然不是说不能处理，只是来说更加麻烦。先来说下我们目前做的功能需求吧：基于ElementUI的el-upload上传图片为了减少图片占用的空间（目前基于阿里云OSS，这个后期介绍），我们在前端上传图片之前在不影响图片展示质量的前提下，对图片进行压缩表单数据与图片文件同步上传可以单张图片上传也可以同时上传多张图片（以下我们以多张图片上传来说明）壹、提取图片压缩公共方法在ruoyi.js公共方法中，封装图片压缩方法/** 图片压缩，默认同比例压缩 * @param {Object} fileObj * 图片对象 * 回调函数有一个参数，base64的字符串数据 */ export function compress(fileObj, callback) { // console.log('压缩前文件大小', fileObj.size) try { const image = new Image() image.src = URL.createObjectURL(fileObj) image.onload = function () { const that = this // 默认按比例压缩 let w = that.width let h = that.height const scale = w / h w = fileObj.width || w h = fileObj.height || (w / scale) let quality = 0.5 // 默认图片质量为0.7 // 生成canvas const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') // 创建属性节点 const anw = document.createAttribute('width') anw.nodeValue = w const anh = document.createAttribute('height') anh.nodeValue = h canvas.setAttributeNode(anw) canvas.setAttributeNode(anh) ctx.drawImage(that, 0, 0, w, h) // 图像质量 if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) { quality = fileObj.quality } // quality值越小，所绘制出的图像越模糊 const data = canvas.toDataURL('image/jpeg', quality) // 压缩完成执行回调 const newFile = convertBase64UrlToBlob(data) callback(newFile) // console.log('压缩后文件信息', newFile) } } catch (e) { console.log('压缩失败!') } } // Base64 => 二进制（Blob） function convertBase64UrlToBlob(urlData) { // 去掉url的头，并转换为byte const bytes = window.atob(urlData.split(',')[1]) // 处理异常,将ascii码小于0的转换为大于0 const ab = new ArrayBuffer(bytes.length) const ia = new Uint8Array(ab) for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i) } return new Blob([ab], {type: 'image/png'}) } 在main.js中挂载公共方法，方便在后面使用Vue.prototype.compress = compress贰、页面增加上传图片功能在表单中，增加上传图片功能<el-upload action="#" list-type="picture-card" :auto-upload="false" multiple :headers="headers" ref="carPhotoListRef" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="handleChange" :file-list="imageFileList" :disabled="form.inquiryStatus !== 'inquirying'" :class="{ hide: form.inquiryStatus !== 'inquirying' }" accept="image/bmp,image/jpg,image/png,image/svg,image/psd,image/webp,image/jpeg"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogImageVisible" :append-to-body="true"> <img width="100%" :src="dialogImageUrl" alt=""/> </el-dialog>因为我们要手工上传图片，所以需要对el-upload的属性进行配置action因为我们要收工上传，所以action需要设置成#auto-upload设置成false禁止自动上传headers是基于若依的认证，传递头部信息的on-preview预览图片on-remove删除图片同步处理我们后端绑定数据on-change图片改变的钩子，因为我们要手工上传图片，因此通过这个钩子完成图片的压缩其他的一些属性基本设置图片预览，限制上传图片类型的，按需设置即可。data里面主要设置图片预览、绑定图片列表等属性data() { return { headers: { Authorization: "Bearer " + getToken() }, //预览图片窗口是否可见 dialogImageVisible: false, //预览图片Url dialogImageUrl: null, imageFileList: [], } }method方法如下//删除图片 handleRemove(file, fileList) { this.imageFileList = fileList if (this.form.carPhotoList) { let index = -1 for (let i = 0; i < this.form.carPhotoList.length; i++) { if (this.form.carPhotoList[i].photoId === file.photoId) { index = i } } if (index !== -1) { this.$delete(this.form.carPhotoList, index) } } }, //图片改变 handleChange(file, fileList) { let that = this // 调用自定义的压缩方法 compress(file.raw, function (val) { // 图片格式： blob => file let newFile = new window.File([val], file.name, {type: file.raw.type}); // 新增属性（file）并赋值 let fileObj = {} fileObj.raw = newFile fileObj.name = file.name fileObj.uid = file.uid; fileObj.url = URL.createObjectURL(file.raw); that.imageFileList.push(fileObj) }) // this.imageFileList = fileList }, //预览图片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogImageVisible = true },实现图片压缩主要是通过on-change钩子，选择图片后，通过on-change钩子调用handleChange方法，我们拿到图片文件后，调用compress方法，通过回调函数，将压缩后的图片绑定到imageFileList表单保存/** 提交按钮 */ submitForm() { if (this.imageFileList.length <= 0) { this.msgInfo('请上传图片') return } const loading = this.$loading({ lock: true,//lock的修改符--默认是false text: "保存中",//显示在加载图标下方的加载文案 spinner: "el-icon-loading",//自定义加载图标类名 background: "rgba(0, 0, 0, 0.7)",//遮罩层颜色 target: document.querySelector("#table")//loadin覆盖的dom元素节点 }) this.$refs["form"].validate(valid => { if (valid) { let formData = new FormData() this.imageFileList.forEach(file => { formData.append("imageFileList", file.raw)// 图片列表 }) formData.append("form", JSON.stringify(this.form))//表单 if (this.form.inquiryId != null) { updateInquiry(formData).then(response => { loading.close() this.msgSuccess("修改成功") this.open = false this.getList() }).catch(error => { loading.close() }) } else { addInquiry(formData).then(response => { loading.close() this.msgSuccess("新增成功") this.open = false this.getList() }).catch(error => { loading.close() }) } } else { loading.close() } }) },在表单保存方法中，我们通过FormData将图片文件与表单数据，一起保存。
