企业官网建设流程全解析

一、实现步骤

（1）APP----JS启用多文件上传，按","号分隔完整链接，传后端保存到数据库。

<template><viewclass="upload-page"><viewclass="upload-page__body"><viewclass="flex-white-plr26 ptb10 bdb_f5"><textclass="form-label">产品二维码：</text><textclass="form-value">{{productInfo.SnCode}}</text></view><viewclass="flex-white-plr26 ptb10 bdb_f5"><textclass="form-label">工单编号：</text><textclass="form-value">{{productInfo.WorkOrderCode}}</text></view><viewclass="flex-white-plr26 ptb10 bdb_f5 upload-row"><textclass="form-label">文件上传：</text><viewclass="upload-content"><mes-form ref="uploadForm":labelWidth="0":loadKey="false":formFields="uploadFields":formOptions="uploadFormOptions":padding="0"></mes-form></view></view><!--<view v-for="(item, index) in fileRecordList":key="item.UploadTime + '_' + index"class="record-card"><viewclass="record-card-row"><textclass="colorGray">文件名称：</text><textclass="record-card-value">{{item.FileName}}</text></view><viewclass="record-card-row"><textclass="colorGray">上传人：</text><textclass="record-card-value">{{item.UploadUser}}</text></view><viewclass="record-card-row"><textclass="colorGray">上传时间：</text><textclass="record-card-value">{{item.UploadTime}}</text></view></view>--></view><viewclass="form-btns form-btns--fixed"><u-buttonclass="submit-btn"type="primary"@click="submit">提交</u-button></view></view></template><script>importMesFormfrom'@/components/imes-form/imes-form'import{getNowDate}from'@/static/utils/date.js'exportdefault{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(){constuserInfo=JSON.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)}consturl='api/SnAbnormalAndFileList/GetPageData'this.http.post(url,data,true).then(result=>{if(result.status==0&&Array.isArray(result.rows)){this.fileRecordList=result.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(item=>item&&item.url)},getCurrentTime(){constnow=newDate();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. 获取要上传的文件列表constfiles=this.getUploadFiles()if(!files.length){uni.showToast({title:'请上传文件',icon:'none',duration:2000})return}// 2. 获取上传人和上传时间constuploadUser=this.getUploadUser()constuploadTime=this.getCurrentTime()// 3. 构造请求参数（适配后端 SnAbnormalAndFileList 表）constparam={SNCode:this.productInfo.SnCode,// 厂内编码woCode:this.productInfo.WorkOrderCode,// 工单productNo:this.productInfo.ProductCode,// 产品编码fileUrl:files.map(item=>item.url).join(','),// 多个文件用逗号连接，便于后端分隔转数组Creater:uploadUser,// 创建人CreateDate:uploadTime,// 创建时间stationCode:this.productInfo.StationCode,//站点}// 4. 调用后端接口保存（适配你的表）consturl='api/SnAbnormalAndFileList/saveFile'this.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})})}}}</script><style lang="less"scoped>.upload-page{min-height:100vh;background-color:#f6f6f6;}.upload-page__body{padding-bottom:calc(140rpx+constant(safe-area-inset-bottom));padding-bottom:calc(140rpx+env(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(20rpx+constant(safe-area-inset-bottom));padding-bottom:calc(20rpx+env(safe-area-inset-bottom));background-color:#fff;box-shadow:0-2rpx 12rpxrgba(0,0,0,0.08);}.submit-btn{width:100%;}</style>

（2）前端–VOL扩展vue文件配置img

{field:'fileUrl',title:'文件地址',type:'img',width:220,align:'left'},

二、效果

• APP：
  
• 前端：