一、图片上传up-form-item propgraphBooth view classlabeltext classtext*/text展位图:/view view classtarea up-upload :fileListbooth_data.uploadfileImg afterReadafterRead deletedeletePic acceptimage name1 :maxCount1 /up-upload /view /up-form-item// 新增图片 const afterRead async (event:any) { // 当设置 mutiple 为 true 时, file 为数组格式否则为对象格式 let lists [].concat(event.file); lists.map((item) { booth_data.value.uploadfileImg.push({url:item.url}); }); let fileListLen booth_data.value.uploadfileImg.length; for (let i 0; i lists.length; i) { const result await uploadFilePromise(lists[i]); //发起图片接口请求 let item booth_data.value.uploadfileImg[fileListLen]; booth_data.value.uploadfileImg.splice(fileListLen, 1, {...item,status: success,message: ,url: result,}); fileListLen; } }// 删除图片const deletePic (event:any) {booth_data.value.uploadfileImg.splice(event.index, 1);}// 上传图片接口 const uploadFilePromise (file:any) { return new Promise((resolve, reject) { let a uni.uploadFile({ header: { ContentType: multipart/form-data // 请求体的编码格式 }, url: https://xxx/graphBooth/upload, // 仅为示例非真实的接口地址 filePath: file.url, name: graphBoothFile, success: (res) { if(res.statusCode 200){ let res_data JSON.parse(res.data) if(res_data.code 200){ if(booth_data.value.form_data.graphId ! 0){ // 编辑操作 booth_data.value.form_data.graphBooth res_data.data.imgUrl.split(?)[0] }else{ // 添加操作 booth_data.value.form_data.graphBooth res_data.data.ossId } } } }, fail(faile) { console.log(faile,faile); }, }); }); }后端参考链接 CSDN单文件上传filePath和name必须填写。filePath是要上传文件的路径name属性的内容和后端接口中的参数名一致。ApiOperation(value 上传文件数据接口)PostMapping(value /upload)public String upload(RequestPart(value graphBoothFile) MultipartFile file) {RtnBean rtnBean sftpService.uploadFile(file);}二、单图片预览view classli v-for(item,index) in data.order_list :keyindex view classimg image classimage :srcitem.graphBooth modeaspectFill :lazy-loadtrue clickpreviewImage(item.graphBooth) / /view view// 单图片预览functionpreviewImage(imgUrl:string){//imgUrl http://.......uni.previewImage({loop: true,urls: [imgUrl] //可以展示imgUrl 列表中所有的图片})}三、多图片预览view classimgs v-ifrender_imgs !-- view classlabel图片/view -- view classimgs_layout view classimg v-for(item,index) in render_imgs :keyindex image classimage :srcitem modeaspectFill clickpreviewImage(index) / /view /view /view// 点击图片放大轮播的方法function previewImage(index:any) {// 调用uni.previewImage APIuni.previewImage({current: index, // 当前显示图片索引urls: render_imgs.value // 需要预览的图片 URL 列表});}四、自定义模糊搜索结合下拉选择组件fuzzyQuery.vue代码如下template view classclose_btn clickcloseFun×/view view classscroll_ scroll-view classscrollcss :style{background-color:props.bgcolor} :show-scrollbartrue scroll-y v-iffilteredList.length 0 view classitem v-foritem in filteredList :keyitem.id clickfuzzyClickFun(item) {{ item[props.target_field] }} /view /scroll-view view classempty :style{background-color:props.bgcolor} v-else暂无符合的数据/view /view /template script langts setup import { computed } from vue; const props defineProps({ list:{ type:Array, default(){return []} }, target_word:{ type:String, default: }, target_field:{ type:String, default: }, bgcolor:{ type:String, default:#cfe2f7 } }) const emit defineEmits([sendfuzzyClickFun,close]) // 模糊查询 -- 品牌类 const filteredList computed(() { return props.list.filter((item:any) { return item[props.target_field].toLowerCase().includes(props.target_word.toLowerCase()); }); }) // 选中某个值 function fuzzyClickFun(e:any){ emit(sendfuzzyClickFun,e) } function closeFun(){ emit(close) } /script style langscss .close_btn{ position: absolute; right: 16rpx; margin-top: 10rpx; top: 110%; z-index: 11; width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 10rpx; text-align: center; color: #fff; background-color: #757575; font-weight: bold; font-family: cursive; } .scroll_{ position: absolute; z-index: 10; width: 100%; left: 0; top: 100%; padding: 5rpx 0 20rpx; .scrollcss,.empty{ width: 100%; height: 250px; padding: 10rpx; padding-right: 0; border-bottom-left-radius: 12rpx; border-bottom-right-radius: 12rpx; .item{ text-align: center; padding: 20rpx 0; font-weight: bold; color: #5f5f5f; border-bottom: 1px solid #fff; :last-child{ border-color: transparent; } } } .empty{ text-align: center; line-height: 250px; font-weight: bold; color: #fff; } ::v-deep ::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px !important; height: 1px !important; overflow: auto !important; background: #fff !important; -webkit-appearance: auto !important; display: block; } ::v-deep ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px !important; box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1) !important; background: #fff !important; } ::v-deep ::-webkit-scrollbar-track { /*滚动条里面轨道*/ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; border-radius: 10px !important; background: #a7a7a7 !important; } } /style引用上方组件的页面。import fuzzyQuery from ./components/fuzzyQuery.vue注意类名fuzzy需要设置给父定位因为引用的组件使用了子定位。不设置组件出不来。.fuzzy{position: relative;}up-form-item proptjbrandview classlabeltext classtext*/text推荐品牌:/viewview classinptfuzzyup-inputfocusbrand_list.show_fuzzy true;changeonSearchInput1blurverifyFun1placeholder没有推荐的请填无bordernonev-modelgjjl_data.form_data.tjbrand/up-inputfuzzyQueryv-showbrand_list.show_fuzzytarget_fieldbrandName:listbrand_list.list:target_wordbrand_list.searchQuerysendfuzzyClickFungetfuzzyClickFun1closecloseFun1/fuzzyQuery/view/up-form-itemlet default_list_obj {show_fuzzy:false,searchQuery:,list:[],}const brand_list ref({...default_list_obj})/** erp品牌 start*/ function onSearchInput1(value:any){ brand_list.value.searchQuery value; } function closeFun1(){ brand_list.value.show_fuzzy false } function getfuzzyClickFun1(e:any){ brand_list.value.show_fuzzy false gjjl_data.value.form_data.tjbrande.brandName } function verifyFun1(){ let has_value false; if(gjjl_data.value.form_data.tjbrand ! ){ // 检测是否从下拉选择拿到的值 for(let i0,array brand_list.value.list;i array.length;i){ if(array[i].brandName gjjl_data.value.form_data.tjbrand){ has_value true; break; } } if(!has_value){ gjjl_data.value.form_data.tjbrand onSearchInput1() uNotifyRef.value.show({ type: error, color: #fff, bgColor: #f56c6c, message: 该值不存在库中请重选, duration: 1000 * 3, fontSize: 16, }); } } } /**erp品牌类别 end */五、下拉菜单遮罩层层级关系bugview classdrapdown:class{dis-none: !search_model.dropdownOpen}up-dropdownopenopenDropsclosecloseDropsup-dropdown-itemv-modelsearch_model.search_obj_form.dropdown_value :titlesearch_model.dropdown_options[search_model.search_obj_form.dropdown_value].label:optionssearch_model.dropdown_options/up-dropdown-item/up-dropdown/view// 控制下拉菜单打开和未打开时的高度影响层级点击事故function openDrops() {search_model.value.dropdownOpen true;}function closeDrops() {search_model.value.dropdownOpen false;}.drapdown{ width: 32%; margin-right: 10rpx; ::v-deep .u-dropdown__content__mask.data-v-d45d1d94{ opacity: 0; } ::v-deep .u-cell__title-text.data-v-b4243719 { text-align: center; } .dis-none{ //控制下拉菜单的背景遮罩层影响层级关系 ::v-deep .u-dropdown__content.data-v-d45d1d94{ display: none; } } }六、安装依赖自动导入Vue模块一、安装依赖npm install unplugin-auto-import二、配置Vite插件import { defineConfig } from vite;import uni from dcloudio/vite-plugin-uni;import AutoImport from unplugin-auto-import/vite;export default defineConfig({plugins: [uni(),// 自动导入配置AutoImport({imports: [// 预设vue,uni-app]})]});七、安装和 配置uview-plus1、安装方式 HUbilder下载地址https://ext.dcloud.net.cn/plugin?nameuview-plus2、配置温馨提示 3.4.0以上版本通过下方的options参数进行设置。2.1 main.js注意要在use方法之后执行// import uviewPlus from uview-plus import uviewPlus from /uni_modules/uview-plus app.use(uviewPlus, () { return { options: { // 修改$u.config对象的属性 config: { // 修改默认单位为rpx相当于执行 uni.$u.config.unit rpx unit: rpx } } } })2.2 uni.scss 文件注意请注意uni.scss是一个特殊文件万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中严格按照文档指示在App.vue中引入。在项目根目录的/uni.scss中引入此文件, 如果不存在uni.scss自己创建一个空白文件。// 放在第一行 import /uni_modules/uview-plus/theme.scss;2.3 App.vue注意在App.vue中首行的位置引入注意给style标签加入langscss属性。style langscss /* 注意要写在第一行注意不能引入至uni.scss同时给style标签加入langscss属性 */ import /uni_modules/uview-plus/index.scss; /style2.4 安装依赖库npm i dayjsnpm i clipboard报日期插件的错直接安装日期依赖 npm install dayjs2.5 配置easycom组件模式easycom: { // 这是一个通配符规则意思是 // 只要标签名以 u- 开头就自动匹配 /uni_modules/uview-plus/components/u-xxx/u-xxx.vue autoscan: true, custom: { ^u-(.*): /uni_modules/uview-plus/components/u-$1/u-$1.vue } },// pages.json { easycom: { autoscan: true, // 注意一定要放在custom里否则无效https://ask.dcloud.net.cn/question/131175 custom: { ^u--(.*): /uni_modules/uview-plus/components/u-$1/u-$1.vue, ^up-(.*): /uni_modules/uview-plus/components/u-$1/u-$1.vue, ^u-([^-].*): /uni_modules/uview-plus/components/u-$1/u-$1.vue } }, // 此为本身已有的内容 pages: [ // ...... ] }uview-plus4.x配置尚未发布