VOL_实现APP多文件上传_前端多文件显示！

VOL_实现APP多文件上传_前端多文件显示一、实现步骤1APP----JS启用多文件上传按,号分隔完整链接传后端保存到数据库。2前端--VOL扩展vue文件配置img二、效果一、实现步骤1APP----JS启用多文件上传按,号分隔完整链接传后端保存到数据库。templateviewclassupload-pageviewclassupload-page__bodyviewclassflex-white-plr26 ptb10 bdb_f5textclassform-label产品二维码/texttextclassform-value{{productInfo.SnCode}}/text/viewviewclassflex-white-plr26 ptb10 bdb_f5textclassform-label工单编号/texttextclassform-value{{productInfo.WorkOrderCode}}/text/viewviewclassflex-white-plr26 ptb10 bdb_f5 upload-rowtextclassform-label文件上传/textviewclassupload-contentmes-form refuploadForm:labelWidth0:loadKeyfalse:formFieldsuploadFields:formOptionsuploadFormOptions:padding0/mes-form/view/view!--view v-for(item, index) in fileRecordList:keyitem.UploadTime _ indexclassrecord-cardviewclassrecord-card-rowtextclasscolorGray文件名称/texttextclassrecord-card-value{{item.FileName}}/text/viewviewclassrecord-card-rowtextclasscolorGray上传人/texttextclassrecord-card-value{{item.UploadUser}}/text/viewviewclassrecord-card-rowtextclasscolorGray上传时间/texttextclassrecord-card-value{{item.UploadTime}}/text/view/view--/viewviewclassform-btns form-btns--fixedu-buttonclasssubmit-btntypeprimaryclicksubmit提交/u-button/view/view/templatescriptimportMesFormfrom/components/imes-form/imes-formimport{getNowDate}from/static/utils/date.jsexportdefault{components:{mes-form:MesForm},data(){return{productInfo:{SnCode:,WorkOrderCode:,ProductCode:,ProductName:,StationCode:},uploadFields:{FileList:[]},uploadFormOptions:[{field:FileList,title:,type:img,required:true,readonly:false,colSize:12,multiple:true,// mes-from启用多文件上传maxCount:9,// 最多上传9个文件url:api/SnAbnormalAndFileList/Upload}],fileRecordList:[]}},onLoad(options){this.productInfo{SnCode:options.snCode||,WorkOrderCode:options.workOrderCode||,ProductCode:options.productCode||,ProductName:options.productName||,StationCode:options.stationCode||}this.loadFileList()},methods:{getUploadUser(){constuserInfoJSON.parse(window.localStorage.getItem(user_info));returnuserInfo.data.userTrueName||userInfo.data.userName||Admin},loadFileList(){if(!this.productInfo.SnCode){return}letwheres{name:SNCode,value:this.productInfo.SnCode,displayType:like,}letcondition[]condition.push(wheres)letdata{page:1,rows:30,order:desc,wheres:JSON.stringify(condition)}consturlapi/SnAbnormalAndFileList/GetPageDatathis.http.post(url,data,true).then(result{if(result.status0Array.isArray(result.rows)){this.fileRecordListresult.rows}else{uni.showToast({title:${this.productInfo.SnCode}无异常或文件记录,icon:none,duration:2000})}}).catch((error){uni.showToast({title:${error?.message||error?.Message||网络请求失败},icon:none,duration:2000})})},getUploadFiles(){return(this.uploadFields.FileList||[]).filter(itemitemitem.url)},getCurrentTime(){constnownewDate();return${now.getFullYear()}-${(now.getMonth()1).toString().padStart(2,0)}-${now.getDate().toString().padStart(2,0)}${now.getHours().toString().padStart(2,0)}:${now.getMinutes().toString().padStart(2,0)}:${now.getSeconds().toString().padStart(2,0)};},submit(){// 1. 获取要上传的文件列表constfilesthis.getUploadFiles()if(!files.length){uni.showToast({title:请上传文件,icon:none,duration:2000})return}// 2. 获取上传人和上传时间constuploadUserthis.getUploadUser()constuploadTimethis.getCurrentTime()// 3. 构造请求参数适配后端 SnAbnormalAndFileList 表constparam{SNCode:this.productInfo.SnCode,// 厂内编码woCode:this.productInfo.WorkOrderCode,// 工单productNo:this.productInfo.ProductCode,// 产品编码fileUrl:files.map(itemitem.url).join(,),// 多个文件用逗号连接便于后端分隔转数组Creater:uploadUser,// 创建人CreateDate:uploadTime,// 创建时间stationCode:this.productInfo.StationCode,//站点}// 4. 调用后端接口保存适配你的表consturlapi/SnAbnormalAndFileList/saveFilethis.http.post(url,param,true).then(result{if(result.status){// 第一个用其他提示方式uni.showLoading({title:处理中...,mask:true})setTimeout((){uni.hideLoading()uni.showToast({title:result.Message||result.message||上传成功,icon:success,duration:2000})//刷新列表this.loadFileList()//清空上传组件this.uploadFields.FileList[]},500)}else{uni.showToast({title:result.Message||result.message||上传失败,icon:none,duration:2000})}}).catch((error){uni.showToast({title:error?.message||error?.Message||网络请求失败,icon:none,duration:2000})})}}}/scriptstyle langlessscoped.upload-page{min-height:100vh;background-color:#f6f6f6;}.upload-page__body{padding-bottom:calc(140rpxconstant(safe-area-inset-bottom));padding-bottom:calc(140rpxenv(safe-area-inset-bottom));}.form-label{flex-shrink:0;color:#333;}.form-value{flex:1;margin-left:20rpx;text-align:right;color:#333;word-break:break-all;}.upload-row{align-items:flex-start;}.upload-content{flex:1;margin-left:20rpx;}.record-card{margin:24rpx 26rpx0;padding:26rpx 30rpx;background-color:#fff;border-radius:16rpx;box-shadow:02rpx 12rpxrgba(0,0,0,0.08);}.record-card-row{display:flex;align-items:center;justify-content:space-between;margin-top:16rpx;font-size:28rpx;line-height:1.5;}.record-card-row:first-child{margin-top:0;}.record-card-value{flex:1;margin-left:20rpx;text-align:right;color:#333;word-break:break-all;}.form-btns{text-align:center;}.form-btns--fixed{position:fixed;left:0;right:0;bottom:0;z-index:99;padding:20rpx 30rpx;padding-bottom:calc(20rpxconstant(safe-area-inset-bottom));padding-bottom:calc(20rpxenv(safe-area-inset-bottom));background-color:#fff;box-shadow:0-2rpx 12rpxrgba(0,0,0,0.08);}.submit-btn{width:100%;}/style2前端–VOL扩展vue文件配置img{field:fileUrl,title:文件地址,type:img,width:220,align:left},二、效果APP前端