如何查询一个网站的空间大小,鹤壁网站优化,wap网站模板,汶上做网站1 情景一
需求背景#xff1a;后端配合#xff0c;点击导入按钮#xff0c;弹出“导入”弹窗#xff0c;将电脑本地Excel表格数据导入到页面中表格位置#xff08;需要调用后端接口#xff09;#xff0c;而页面中表格通过后端接口获取最新数据。 实现思路…1 情景一
需求背景后端配合点击导入按钮弹出“导入”弹窗将电脑本地Excel表格数据导入到页面中表格位置需要调用后端接口而页面中表格通过后端接口获取最新数据。 实现思路弹窗嵌入 Element UI Upload 上传组件获取到文件后调后端接口。
action: 上传的地址 file-list: 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}] headers: 设置上传的请求头部上传的文件可能是有固定格式的表头这个是在后端设定好了的所以如果上传的文件格式不对可能会引起报错。 before-upload: 上传文件之前的钩子可作上传之前校验 on-error: 文件上传失败时的钩子 on-exceed: 文件超出个数限制时的钩子 on-success: 文件上传成功时的钩子 on-change: 文件状态改变时的钩子 this.$refs.fileUpload.submit(): 手动上传文件列表(fileUpload是自定义的名字)
组件代码
templatespanel-buttonplainiconel-icon-upload2typeprimarysizemini:disableddisabledclickimportFile{{ $t(import) }}/el-buttonel-dialogv-ifopen:titleimportTitle:visible.syncopenwidth500pxappend-to-body:close-on-click-modalfalse:show-closefalseclosecanceldiv v-ifisShowRecord classrecord-btnel-button iconel-icon-time typeprimary sizemini clickrecordBtnClickspan{{ recordText }}/span/el-button/divdiv styletext-align: center;el-uploadreffileUploadmultiple:auto-uploadfalse:actionuploadFileUrl:before-uploadhandleBeforeUpload:file-listfileList:limitlimit:on-errorhandleUploadError:on-exceedhandleExceed:on-successhandleUploadSuccess:on-changehandleChange:headersheadersclassupload-file-uploaderdiv styleborder:1px dashed #e9e9e9i classel-icon-plus avatar-uploader-icon stylemargin:80px;font-size: 25px; //div!-- 上传提示 --div v-ifshowTip slottip classel-upload__tip{{ $t(pleaseUpload) }}template v-iffileSize{{ $t(sizeLess) }}b stylecolor: #f56c6c{{ fileSize }}MB/b/templatetemplate v-iffileType{{ $t(formatIs) }}b stylecolor: #f56c6c{{ fileType.join(/) }}/b/template{{ $t(file) }}/div/el-upload/divdiv classtemplate!-- form v-showfalse idtemplateForm :actiontemplateUrl methodget / --span clickdownloadFile{{ $t(downloadThisTemplate) }}/span/divdiv slotfooter classdialog-footerel-button typeprimary clicksubmitForm{{ $t(confirm) }}/el-buttonel-button clickcancel{{ $t(cancel) }}/el-button/div/el-dialog/span
/template
script
import { getToken } from /utils/auth
import { downloadGet } from /utils/request
import moment from moment
import $ from /i18n/indexexport default {name: FileImport,props: {// 是否禁用导入按钮disabled: {type: Boolean,default: false},// 导入弹窗标题importTitle: {type: String,default: () {return $.t(fileImport)}},// 数量限制limit: {type: Number,default: 1},// 大小限制(MB)fileSize: {type: Number,default: 20},// 文件类型, 例如[png, jpg, jpeg]fileType: {type: Array,default: () [csv]},// 是否显示提示isShowTip: {type: Boolean,default: true},// 下载模板路径downLoadUrl: { type: String, default: null },// 下载的全拼路径fullPathUrl: { type: String, default: null },// 模板名称fileName: { type: String, default: moment().format(yyyyMMDDHHmmss) },// 导入数据路径importUrl: { type: String, default: null },// 是否展示导入导出记录按钮isShowRecord: {type: Boolean,default: false},// 导入导出记录文字recordText: {type: String,default: () {return $.t(importAndExportRecord)}}},data() {return {open: false,number: 0,baseUrl: process.env.VUE_APP_BASE_API,// templateUrl:// this.fullPathUrl || process.env.VUE_APP_BASE_API this.downLoadUrl,fileList: []}},computed: {headers() {return { Authorization: getToken() }},// 是否显示提示showTip() {return this.isShowTip (this.fileType || this.fileSize)},// 上传文件服务器地址uploadFileUrl() {return process.env.VUE_APP_BASE_API this.importUrl}// templateUrl() {// return this.fullPathUrl || process.env.VUE_APP_BASE_API this.downLoadUrl// }},methods: {importFile() {this.open true},submitForm() {if (this.fileList.length 0) {this.$modal.msgError(this.$t(pleaseImportFile))return}this.$refs.fileUpload.submit()},cancel() {this.$refs.fileUpload.clearFiles()this.open falsethis.$emit(importSuccess)},// 上传前校检格式和大小handleBeforeUpload(file) {// 校检文件类型if (this.fileType) {const fileName file.name.split(.)const fileExt fileName[fileName.length - 1]const isTypeOk this.fileType.indexOf(fileExt) 0if (!isTypeOk) {this.$modal.msgError(${this.$t(fileTypeErrorUpload)}${this.fileType.join(/)}${this.$t(file)})return false}}// 校检文件大小if (this.fileSize) {const isLt file.size / 1024 / 1024 this.fileSizeif (!isLt) {this.$modal.msgError(${this.$t(uploadFileSizeLess)} ${this.fileSize} MB!)return false}}this.$modal.loading(this.$t(waitForUpload))this.numberreturn true},// 文件个数超出handleExceed() {this.$modal.msgError(${this.$t(uploadFileNumberLess)} ${this.limit})},// 上传失败handleUploadError() {this.$modal.msgError(this.$t(uploadFail))this.$modal.closeLoading()},// 上传成功回调handleUploadSuccess(res, file) {if (res.code 0) {this.$message({ type: success, message: this.$t(uploadSuccess) })this.cancel()this.$emit(handleUploadSuccess)} else {this.number--this.$modal.msgError(res.msg)this.$refs.fileUpload.handleRemove(file)}this.$modal.closeLoading()},downloadFile() {// document.getElementById(templateForm).submit()let dowloadUrl this.downLoadUrlif (this.fullPathUrl) {dowloadUrl this.fullPathUrl}downloadGet(dowloadUrl, ${this.fileName}.${this.fileType}, {})},recordBtnClick() {this.$emit(recordBtnClick)},handleChange(file, fileList) {this.fileList fileList}}
}
/script
style langscss scoped
.template {text-align: center;color: #1890ff;padding: 10px;span:hover {cursor: pointer;border-bottom: 1px solid #1890ff;}
}.record-btn {position: absolute;right: 18px;top: 18px;
}
/style// 通用下载方法blob形式
export function downloadGet(url, filename, config) {downloadLoadingInstance Loading.service({text: 正在下载数据请稍候,spinner: el-icon-loading,background: rgba(0, 0, 0, 0.7)})return service.get(url, {headers: { Content-Type: application/x-www-form-urlencoded },responseType: blob,...config}).then(async(data) {const isLogin await blobValidate(data)if (isLogin) {const blob new Blob([data])saveAs(blob, filename)} else {const resText await data.text()const rspObj JSON.parse(resText)const errMsg errorCode[rspObj.code] || rspObj.msg || errorCode[default]Message.error(errMsg)}downloadLoadingInstance.close()}).catch((r) {console.error(r)Message.error(下载文件出现错误请联系管理员)downloadLoadingInstance.close()})
}import Cookies from js-cookieconst TokenKey Admin-Tokenexport function getToken() {return Cookies.get(TokenKey)
}使用组件 FileImportdown-load-url/client/template/export_template/sec_typeimport-url/client/sec_type/importfile-name导入持仓
/2 情景二
需求背景纯前端实现文件导入的情景。例如一个常规excel文件填写模板在用户的电脑上用户上传完后还可以在预览展示时在线修改改完可以下载也可以将数据给到服务端但这时比如这模板数据通常不多比如是一个团队成员这样的数据通过文件流的形式传给后端可能不是很理想倒不如前端解析传那几行数据就行。 实现思路importExcel.js 导入excel文件
使用html支持上传标签从本地获取文件例如type为file的inputel-upload等。利用FileReader将文件读取为二进制字符串。使用XLSX插件的XLSX.read()方法将二进制字符串转换成excel文件的工作蒲对象workbook简写成wb。通过XLSX.utils.sheet_to_json()方法从wb中获取第一张 Sheets表格数据并将其转换为json数据。重组json数据生成数组即是根据自己的定义的列字段名重新组成符合自己需求的json数据。因为从excel中提取的数据是没有字段名或字段名不符合要求的而我们需要渲染在页面表格中又确实需要合适的字段名。
/* eslint-disable */
/* 导入excel文件 */
/*** param file 文件流* param tableTemplate 要导入的表格模板一个数组如* tableTemplate: [userCode, userName, department, major, position]其中的值* 为表格的字段名注意字段的顺序应与实际的导入excel一致。*/
export default function importExcel (file, tableTemplate) {return new Promise((resolve, reject) {let f file.raw // 获取文件内容// 通过DOM取文件数据let rABS false // 是否将文件读取为二进制字符串let reader new FileReader()FileReader.prototype.readAsBinaryString function (f) {let binary let rABS false // 是否将文件读取为二进制字符串let wb // 读取完成的数据let outdatalet reader new FileReader()reader.onload function (e) {let bytes new Uint8Array(reader.result)let length bytes.byteLengthfor (let i 0; i length; i) {binary String.fromCharCode(bytes[i])}let XLSX require(xlsx)if (rABS) {wb XLSX.read(btoa(binary), { // 手动转化type: base64})} else {wb XLSX.read(binary, {type: binary})}outdata XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) // outdata就是表格中的值let arr []// 下面是数据解析提取逻辑if (tableTemplate.length 0) {let tempArr Object.keys(outdata[0])let tempArrNew []for (let i in tempArr) {for (let k in tableTemplate) {if (i k) {tempArrNew.push({fieldE: tableTemplate[k], fieldC: tempArr[i]})}}}tempArr tempArrNewoutdata.map(item {let obj {}tempArr.map(temp2 {obj[temp2.fieldE] item[temp2.fieldC]})arr.push(obj)})}resolve(arr)}reader.readAsArrayBuffer(f)}if (rABS) {reader.readAsArrayBuffer(f)} else {reader.readAsBinaryString(f)}})
}
