文件 & 圖片 上傳 及少許正則校驗

<template><div style="padding: 20px"><Row><Col span="24"><div><CFlex type="flex" justify="space-between" align="midlle"><div class="page_title">供應商詳情</div><CButton type="primary" @click.native="editshow"><Icon type="ios-create-outline" />編輯供應商</CButton></CFlex><!-- 詳情內容 --><div class="box_big"><!-- 基本信息 --><div style="background: #fafafa; padding: 10px"><p class="fize">基本信息</p><div class="project_info_content_data"><FlexLinePI title="供應商名稱：">{{ projectData.supplierName }}</FlexLinePI><FlexLinePI title="服務分類：">{{ projectData.serviceClassify }}</FlexLinePI><FlexLinePI title="服務范圍：">{{ projectData.serviceScope }}</FlexLinePI><FlexLinePI title="聯系人：">{{ projectData.linkMan }}</FlexLinePI><FlexLinePI title="聯系電話：">{{ projectData.phoneNo }}</FlexLinePI><FlexLinePI title="郵箱：">{{ projectData.email }}</FlexLinePI><FlexLinePI title="省市：">{{ city }}</FlexLinePI><FlexLinePI title="詳細地址：">{{ projectData.address }}</FlexLinePI><FlexLinePI title="員工人數：">{{ projectData.employeeNum }}</FlexLinePI><FlexLinePI title="注冊資本(萬)：">{{ projectData.registeredAssets }}</FlexLinePI><FlexLinePI title="成立年限：">{{ projectData.establishYear }}</FlexLinePI><FlexLinePI title=""> </FlexLinePI></div></div><!-- 附件展示： --><div style="background: #fafafa; padding: 10px; margin-top: 20px"><p class="fize"> 附件展示：</p><ul style="padding: 10px"><liv-for="(item, index) in SupplierFileDataList"class="licolor" style="background: #fafafa;"><spanstyle="cursor: pointer"@click="openfile(item.filePath)"><span><img src="../../assets/附件.svg" alt="" style="vertical-align: middle;"/></span>&emsp;{{ item.originalFileName }}</span></li></ul></div><!-- 圖片展示 --><div style="background: #fafafa; padding: 10px; margin-top: 20px"><!-- 營業執照 --><div class="box_small"><div class="box_img_top" style="float: left">營業執照證明：</div><divclass="box_img_bottom"v-for="(urls, index) in Businesslicense":key="index"style="float: left"><img:src="urls.filePath"alt=""@click="opentupian(urls.filePath)"/></div></div><!-- 納稅人 --><div class="box_small"><div class="box_img_top">納稅人類型證明：</div><divclass="box_img_bottom"v-for="(urls, index) in Taxpayercertificate":key="index"><img:src="urls.filePath"alt=""@click="opentupian(urls.filePath)"/></div></div><!-- 其它 --><div class="box_small"><div class="box_img_top">其它：</div><divclass="box_img_bottom"v-for="(urls, index) in otherpicture":key="index"><img:src="urls.filePath"alt=""@click="opentupian(urls.filePath)"/></div></div></div><!-- 供應商評級 --><divstyle="background: #fafafa;padding: 10px;margin-top: 20px;border-radius: 0.8rem;"><p class="fize">供應商評級<span class="details" @click="opengragrade">去評級</span></p><div class="project_info_content_data"><FlexLinePI title="得分："><span style="color: #156cee">{{ gradelist.supplierScore }}</span></FlexLinePI></div><div class="project_info_content_data"><FlexLinePI title="風險級別："><span style="color: #156cee">{{ gradelist.supplierRate }}</span></FlexLinePI></div><div class="project_info_content_data"><FlexLinePI title="評級時間："><span style="color: #156cee">{{ gradelist.updateTime }}</span></FlexLinePI></div><div class="project_info_content_data"><p class="paddingleft"><span>注：A級：90-100分</span><span>B級：70-89分</span><span>C級：60-69分</span><span>不合格：60分以下</span></p></div></div><!-- 項目服務評分 --><divstyle="background: #fafafa; padding: 10px; margin-top: 20px"v-if="isshow"><p class="fize">項目服務評分</p><div class="project_info_content_data" style="margin-top: 20px"><Table class="table" :columns="columns1" :data="tableList"><template slot-scope="{ row, index }" slot="servicescore"><Rate v-model="row.rateLevel" /></template></Table></div><div class="project_info_content_data"><p class="paddingleft"><span>注：5星：95分以上（包含95分）</span><span>4星：90-94分（包含90分）</span><span>3星：85-89分（包含85分）</span><span>2星：80-84分（包含80分）</span><span>1星：75-79分（包含75分）</span></p></div></div></div></div></Col></Row><!-- 編輯彈框 --><CModal :show.sync="createProjectShow"><div slot="top" class="project_create_title">編輯供應商信息</div><divclass="project_create_content":style="'height:' + contentHeight + 'px'"><div style="height: 20px; width: 100px"></div><Form:model="formData":label-width="150"label-position="right"inlineref="formValidate":rules="formValidate"><FormItem label="供應商名稱：" prop="supplierName" required><Inputclass="form_item"v-model="formData.supplierName"placeholder="請輸入供應商名稱"maxlength="50"/></FormItem><FormItem label="服務分類：" prop="servicetype" required><Selectclass="search_item"placeholder="請選擇服務分類"v-model="formData.servicetype"clearablefilterablestyle="width: 200px"><Option v-for="item in Classfiylist" :value="item" :key="item">{{item}}</Option></Select></FormItem><FormItem label="省市：" prop="provincescities" required><Cascaderclass="form_item":data="addressData"v-model="formData.provincescities"filterableplaceholder="請選擇省市"transfer></Cascader></FormItem><FormItem label="詳細地址：" prop="address" required><Inputclass="form_item"v-model="formData.address"placeholder="請輸入詳細地址"maxlength="30"/></FormItem><FormItem label="聯系人：" prop="contactsone" required><Inputclass="form_item"v-model="formData.contactsone"placeholder="請輸入聯系人"@on-keyup="formData.contactsone = formData.contactsone.replace(/[^\u4e00-\u9fa5]/g,'')"maxlength="5"type="text"/></FormItem><FormItem label="聯系電話：" prop="contactstwo" required><Inputclass="form_item"v-model="formData.contactstwo"placeholder="請輸入聯系電話"maxlength="20"/></FormItem><FormItem label="郵箱："><Inputclass="form_item"v-model="formData.mailbox"placeholder="請輸入郵箱"/></FormItem><FormItem label="員工人數："><Inputclass="form_item"v-model="formData.employeesnum"placeholder="請輸入員工人數"@on-keyup="formData.employeesnum = formData.employeesnum.replace(/^(0+)|[^\d]+/g,'')"maxlength="20"type="number"/></FormItem><FormItem label="成立年限："><Inputclass="form_item"v-model="formData.establishyear"placeholder="請輸入成立年限"maxlength="15"/></FormItem><FormItem label="注冊資本(萬)："><Inputclass="form_item"v-model="formData.registeredcapital"placeholder="請輸入注冊資本(萬)"maxlength="20"/></FormItem><FormItem label="服務范圍："><Inputclass="form_item"v-model="formData.services"placeholder="請輸入服務范圍"maxlength="150"show-word-limitstyle="width: 560px"/></FormItem></Form><!-- 文件上傳 --><div style="margin-left: 4vw; padding: 0 40px 5px 0px"><span style="float: left;line-height:35px;font-size: 16px;">上傳附件：</span><span><Uploadtype="select":on-success="openlist":show-upload-list="false":action="'/isip/admin/api/v1/upload/file?supplierId=' +this.projectId +'&fieldName=' +this.enclosure"><Button icon="ios-cloud-upload-outline">上傳附件</Button></Upload></span></div><div style="margin-left: 4vw; padding: 0 40px 5px 0px"><ul><li v-for="(item, index) in SupplierFileDataList" class="licolor" style="height: 40px;"><div style="padding-top: 10px;"><span><img src="../../assets/附件.svg" alt="" style="vertical-align: middle;padding-left:10px"/></span>&emsp;<span >{{ item.originalFileName }}</span></div><div @click="deleteImg(item.fileId)" class="icon">X</div></li></ul></div><div class="box_img"><div class="box_img_top">營業執照：</div><div class="box_img_bottom"><divv-for="(urls, index) in Businesslicense":key="index"class="boximg"><div class="boximg_delete" @click="deleteImg(urls.fileId)"></div><img :src="urls.filePath" width="200px" height="170px" /></div><divclass="input"@click="imgClick()"v-if="Businesslicense.length > 0 ? false : true"><span class="span">點擊上傳</span></div><inputstyle="float: left; display: none"type="file"id="uploadFile"accept="image/*"@change="readLocalFile(projectId, 'Businesslicense')"/></div></div><div class="box_img"><div class="box_img_top">納稅人類型證明：</div><div class="box_img_bottom"><divv-for="(urls, index) in Taxpayercertificate":key="index"class="boximg"><div class="boximg_delete" @click="deleteImg(urls.fileId)"></div><img :src="urls.filePath" width="200px" height="170px" /></div><divclass="input"@click="imgClickone()"v-if="Taxpayercertificate.length > 0 ? false : true"><span class="span">點擊上傳</span></div><inputstyle="float: left; display: none"type="file"id="uploadFileone"accept="image/*"@change="readLocalFile(projectId, 'Taxpayercertificate')"/></div></div><div class="box_img_otherpicture"><div class="box_img_top">其它：</div><div class="box_img_bottom" style="float: left"><divv-for="(urls, index) in otherpicture":key="index"style=""class="box_img_bottom_b"><div class="boximg_delete" @click="deleteImg(urls.fileId)"></div><img :src="urls.filePath" width="200px" height="170px" /></div><divstyle="width: 200px;height: 170px;border: 1px dashed #ccc;float: left;position: relative;cursor: pointer;"@click="imgClicktwo()"><spanstyle="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">點擊上傳</span></div><inputstyle="float: left; display: none"type="file"id="uploadFiletwo"accept="image/*"@change="readLocalFile(projectId, 'otherpicture')"/></div></div></div><CButtonslot="bottom"longtype="primary"@click.native="submit('formValidate')">保存</CButton></CModal><!-- 圖片展示 --><CModal :show.sync="imgshow"><div class="imgopenshow"><img :src="imgshowopen" alt="" /></div></CModal></div> </template><script> import Supplier from "@/api/isip/Suppliermanagement"; import ChinaAddressV4Data from "@/datas/china_address_other"; import ProjectCreate from "../../views/basicdata//components/project-create"; //創建 const FlexLinePI = {props: ["title"],template: `<div class="flex_line_pi"><div class="flex_line_pi_l">{{title}}</div><div class="flex_line_pi_r"><slot></slot></div></div>`, }; export default {name: "projectSupplierdetails",props: {},components: {FlexLinePI,ProjectCreate,},data() {return {// 附件名稱enclosure: "enclosure",SupplierFileDataList: [], // 附件列表//city: "",isshow: false,// 項目idprojectId:this.$route.query.projectId || sessionStorage.getItem("supplierid"),addressData: ChinaAddressV4Data, //省市地址Classfiylist: ["信息技術","廣告媒體","印刷包裝","酒店餐飲","網絡通信","商務咨詢","人力資源","律師事務","物流運輸","其它",],// value:3, //供應商評星page: 1,pageSize: 3,count: 0, //總條數projectData: {}, //基本信息gradelist: {},tableList: [],columns1: [{title: "序號",type: "index",width: 65,align: "center",},{title: "服務項目時間",key: "createTime",align: "center",},{title: "項目名稱",key: "projectName",align: "center",},{title: "服務項目評分",key: "projectScore",align: "center",},{title: "供應商服務星級",key: "rateLevel",slot: "servicescore",align: "center",},{title: "服務評分時間",key: "updateTime",align: "center",},{title: "操作",key: "address",align: "center",render: (h, params) => {return this.btnTranslate(h, params);},},],// 編輯createProjectShow: false,formData: {supplierName: "",servicetype: "",provincescities: [],address: "",contactsone: "",contactstwo: "",mailbox: "",employeesnum: "",establishyear: "",registeredcapital: "",services: "",},formValidate: {supplierName: [{validator: (rule, value, callback) => {if (!value) {callback(new Error("請輸入項目名稱"));} else {callback();}},},],servicetype: [{validator: (rule, value, callback) => {if (!value || value.length == 0) {callback(new Error("請選擇服務類型"));} else {callback();}},trigger: "change",},],provincescities: [{validator: (rule, value, callback) => {if (!value || value.length == 0) {callback(new Error("請選擇省市"));} else {callback();}},trigger: "change",},],address: [{validator: (rule, value, callback) => {if (!value) {callback(new Error("請輸入詳細地址"));} else {callback();}},},],contactsone: [{validator: (rule, value, callback) => {if (!value) {callback(new Error("請輸入聯系人"));} else {callback();}},},],contactstwo: [{validator: (rule, value, callback) => {if (!value) {callback(new Error("請輸入聯系電話"));} else {callback();}},},],},// 圖片Businesslicense: [],Taxpayercertificate: [],otherpicture: [],// 圖片查看imgshow: false,imgshowopen: "",};},mounted() {this.queryProjectList();},methods: {// 首次獲取頁面詳情數據queryProjectList() {new Promise((resolve, reject) => {Supplier.supplierselectone(this.projectId).then((response) => {if (response.result[0].SupplierProjectConfigResp != null) {this.tableList = response.result[0].SupplierProjectConfigResp;}if (response.result[0].FastSupplierInfo != null) {this.projectData = response.result[0].FastSupplierInfo;let city1 = response.result[0].FastSupplierInfo.provinceCode;let city2 = response.result[0].FastSupplierInfo.cityCode;this.formData.supplierName =response.result[0].FastSupplierInfo.supplierName;this.formData.servicetype =response.result[0].FastSupplierInfo.serviceClassify;this.formData.provincescities.push(response.result[0].FastSupplierInfo.provinceCode);this.formData.provincescities.push(response.result[0].FastSupplierInfo.cityCode);this.formData.address =response.result[0].FastSupplierInfo.address;this.formData.contactsone =response.result[0].FastSupplierInfo.linkMan;this.formData.contactstwo =response.result[0].FastSupplierInfo.phoneNo;this.formData.mailbox = response.result[0].FastSupplierInfo.email;this.formData.employeesnum =response.result[0].FastSupplierInfo.employeeNum;this.formData.establishyear =response.result[0].FastSupplierInfo.establishYear;this.formData.registeredcapital =response.result[0].FastSupplierInfo.registeredAssets;this.formData.services =response.result[0].FastSupplierInfo.serviceScope;// 翻譯省市let provinceName;let cityName;for (const address of this.addressData) {if (address.value == city1) {provinceName = address.label;for (const cityItem of address.children) {if (cityItem.value == city2) {cityName = cityItem.label;}}}}this.city = provinceName + "-" + cityName;}if (response.result[0].FastSupplierRateInfo != null) {this.gradelist = response.result[0].FastSupplierRateInfo;}if (response.result[0].SupplierInfo.fastSupplierFileDataList != null) {let arr =response.result[0].SupplierInfo.fastSupplierFileDataList;(this.Businesslicense = []),(this.Taxpayercertificate = []),(this.otherpicture = []),(this.SupplierFileDataList = []),arr.forEach((item) => {if (item.fieldName == "Businesslicense") {this.Businesslicense.push(item); //獲取圖片base64代碼}if (item.fieldName == "Taxpayercertificate") {this.Taxpayercertificate.push(item); //獲取圖片base64代碼}if (item.fieldName == "otherpicture") {this.otherpicture.push(item); //獲取圖片base64代碼}if (item.fieldName == "enclosure") {this.SupplierFileDataList.push(item); //獲取圖片base64代碼}});}}).catch((error) => {reject(error);});});},// 編輯供應商editshow() {this.createProjectShow = true;},// 等級評級opengragrade() {this.$router.push({path: "/supplierrating",query: {projectId: this.projectId,},});},// 編輯信息submit(name) {this.$refs[name].validate((valid) => {if (valid) {let data = {id: this.projectId,supplierName: this.formData.supplierName, //項目名稱serviceClassify: this.formData.servicetype, //服務分類provinceCode: this.formData.provincescities[0], //省份cityCode: this.formData.provincescities[1], // 市區address: this.formData.address, //詳細地址linkMan: this.formData.contactsone, //聯系人phoneNo: this.formData.contactstwo, //聯系人email: this.formData.mailbox, //郵箱employeeNum: this.formData.employeesnum, //員工人數establishYear: this.formData.establishyear, // 成立年限registeredAssets: this.formData.registeredcapital, // 注冊資本serviceScope: this.formData.services, //服務范圍status: "N",isDelete: "N",};setTimeout(() => {this.$Spin.hide();}, 2000);new Promise((resolve, reject) => {Supplier.supplierupdatelist(data).then((response) => {this.$Message.success("供應商信息編輯成功！");this.createProjectShow = false;this.queryProjectList();}).catch((error) => {reject(error);});});} else {this.$Message.error("請輸入相關信息！");}});},// 圖片添加//刪除圖片deleteImg(id) {new Promise((resolve, reject) => {Supplier.supplierpicdelete(id).then((response) => {this.queryProjectList();// this.createProjectShow = falsethis.$Message.success("刪除成功！");}).catch((error) => {reject(error);});});},//圖片clickimgClick() {document.getElementById("uploadFile").click();},imgClickone() {document.getElementById("uploadFileone").click();},imgClicktwo() {document.getElementById("uploadFiletwo").click();},//點擊選中圖片readLocalFile(supplierId, fieldName) {var param = new FormData();let files = event.target.files[0];param.append("uploadFile", files, files.name);try {new Promise((resolve, reject) => {Supplier.queryProjectIcon(param, supplierId, fieldName).then((response) => {if (response.result.fieldName == "Businesslicense") {this.Businesslicense.push(response.result); //獲取圖片base64代碼}if (response.result.fieldName == "Taxpayercertificate") {this.Taxpayercertificate.push(response.result); //獲取圖片base64代碼}if (response.result.fieldName == "otherpicture") {this.otherpicture.push(response.result); //獲取圖片base64代碼}}).catch((error) => {reject(error);});// 文本刪除document.getElementById("uploadFile").value = null;document.getElementById("uploadFileone").value = null;document.getElementById("uploadFiletwo").value = null;});event.target.value = " ";} catch (error) {}},opentupian(url) {this.imgshow = true;this.imgshowopen = url;},// 服務評分btnTranslate(h, params) {let btnArr;if (params.row.projectScore == "") {btnArr = [h("span",{style: {paddingLeft: "7px",color: "#156CEE",cursor: "pointer",},on: {click: () => {this.$router.push({path: "/projectseriverating",query: {projectId: params.row.projectId,Id: params.row.id,},});},},},"去評分"),];} else {btnArr = [h("span",{style: {paddingLeft: "7px",color: "#156CEE",cursor: "pointer",},on: {click: () => {this.$router.push({path: "/projectseriverating",query: {projectId: params.row.projectId,Id: params.row.id,},});},},},"詳情"),];}return h("div", btnArr);},// 上傳附件openfile(url) {window.location.href = url;},// 附件上傳成功觸發openlist() {this.queryProjectList();},}, }; </script><style scoped lang='less'> @import "./components/projectcreate"; .box_big {width: 100%;height: 78vh;background: #ffffff;border-radius: 16px;margin-top: 15px;padding: 15px;border: 1px solid rgba(245, 245, 245, 0.8);box-shadow: 1px 1px 5px 0px #cccc;overflow-y: scroll; } .page_title {font-size: 32px;color: #333333;font-weight: 500; } .fize {font-size: 18px;font-weight: bold;margin-top: 20px;margin-left: 10px; } .project_info_content_data {display: flex;flex-wrap: wrap;justify-content: space-between;> div {min-width: 300px;width: 33%;} } .flex_line_pi {font-size: 16px;display: flex;// align-items: center;padding: 7px 0;width: 33%;/deep/ .flex_line_pi_l {color: #666666;white-space: nowrap;width: 120px;padding-left: 10px;// line-height: 35px;}.flex_line_pi_r {color: #333333;width: 66%;} } .details {float: right;cursor: pointer;padding: 8px 20px;background: #156cee;border-radius: 8px;color: #ffffff;font-size: 15px;margin-right: 20px; } .paddingleft {// margin-top:20px;margin: 20px 0 0 13px;display: flex;align-items: center;span {color: #999999;padding-right: 60px;} } .table {border-radius: 8px;box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);width: 98% !important;margin: 0 auto; } .ivu-table-cell {padding-left: 0px !important; } .table /deep/ .ivu-table {width: 100% !important; }/deep/ .ivu-card-body {padding: 0px;.div_img {width: 200px;height: 200px;img {width: 100%;border-radius: 15px;}} } </style> <style lang="less" scoped> .data_list {display: flex;flex-wrap: wrap;overflow: hidden;height: 80%;position: relative;padding-right: 14px; } .data_item {display: flex;align-items: center;padding: 10px;.data_item_name {border: 1px solid #ccc;border-radius: 10px;width: 240px;height: 170px;overflow: hidden;img {width: 100%;height: 100%;}} } .boximg {float: left;position: relative;.boximg_delete {width: 24px;height: 24px;position: absolute;background: url("../../assets/刪除.svg");right: -11px;top: -10px;cursor: pointer;line-height: 20px;border-radius: 20px;} } .input {width: 200px;height: 170px;border: 1px dashed #ccc;float: left;margin-right: 10px;position: absolute;left: 0;cursor: pointer;.span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} } </style> <style lang="less" scoped> .box_small {width: 100%;overflow: hidden;margin-top: 10px;.box_img_top {float: left;width: 120px;text-align: right;}.box_img_bottom {float: left;width: 240px;height: 170px;cursor: pointer;margin-right: 10px;img {width: 100%;height: 100%;}} } .imgopenshow {img {width: 100%;height: 100%;} } li {list-style: none; } .licolor {width: 100%;margin: 10px 0px;background: #f5f5f5;display: flex;justify-content: space-between;.deletex {color: red;padding: 0px 10px;cursor: pointer;} } .icon {margin-top: 8px;margin-right: 10px;width: 25px;height: 25px;background: rgb(167, 166, 166);border-radius: 20px;text-align: center;line-height: 25px;color: #ffffff;font-size: 18px;cursor: pointer; } </style>

總結

以上是生活随笔為你收集整理的文件 图片 上传 及少许正则校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。