技术标签: elementui js vue.js javascript
话不多说,直接上代码
<template>
<el-dialog
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-form-item label="标题" prop="title">
<el-input v-model="dataForm.title" placeholder="标题"></el-input>
</el-form-item>
<el-form-item label="附件" prop="files">
<el-upload
class="upload-demo"
action
:http-request="uploadFile"
:before-upload="beforeUpload"
name="file"
:headers="headers"
:data="uploadData"
:file-list="fileList"
:on-remove="removeFile"
multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传小于5M的文件</div>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
visible: false,
dataForm: {
id: 0,
title: ''
},
dataRule: {
},
uploadUrl: '',
uploadData: {},
fileList:[],
headers: { "Content-Type": "multipart/form-data" }, //设置表头
file: [],
fileType: [ "pdf", "doc", "docx", "xls", "xlsx","txt","png","jpg", "bmp", "jpeg"],
}
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/sys/sysnotify/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.title = data.sysNotify.title
//文件回显
for (var i in data.fileList) {
//[{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
this.fileList.push(data.fileList[i])
}
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
//新建FormData上传
let FormDatas = new FormData()
//多文件上传
for (var i in this.file) {
FormDatas.append('file', this.file[i]);
}
FormDatas.append("id", this.dataForm.id || '');
FormDatas.append("title", this.dataForm.title);
this.$http({
url: this.$http.adornUrl(`/sys/sysnotify/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
headers: this.headers,
data: FormDatas
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
},
//上传文件之前验证文件类型和大小
beforeUpload(file) {
if (file.type != "" || file.type != null || file.type != undefined){
//截取文件的后缀,判断文件类型
const FileExt = file.name.replace(/.+\./, "").toLowerCase();
//计算文件的大小
const isLt5M = file.size / 1024 / 1024 < 5; //这里做文件大小限制
//如果大于5M
if (!isLt5M) {
this.$message({
message: '上传文件大小不能超过 5MB!',
type: 'info'
});
return false;
}
//如果文件类型不在允许上传的范围内
if(this.fileType.includes(FileExt)){
return true;
}
else {
this.$message.error("上传文件格式不正确!");
return false;
}
}
},
//把上传文件放入列表中
uploadFile(item){
this.file.push(item.file)
},
//移除文件
removeFile(item) {
for (var i in this.file) {
if (item.name == this.file[i].name) {
this.file.splice(i, 1)
}
}
}
}
}
</script>
文章浏览阅读4.4k次。点击上方,选择星标或置顶,每天给你送干货!来自:哈工大讯飞联合实验室EMNLP(Conference on Empirical Methods in Natural Language Pr..._acl2021时间线
文章浏览阅读276次,点赞3次,收藏4次。想体验跟下载开源商城系统的在复杂代码中寻找bug是每个程序员都必须面对的挑战。bug的存在可能导致程序运行异常,影响软件的质量。本文将探讨复杂代码中bug的成因与识别,以及如何在实践中运用调试工具、代码审查、静态分析、单元测试、集成测试、日志分析、调试策略等方法来提高新手程序员在复杂代码中寻找bug的能力。首先,我们需要了解复杂代码中bug的成因。随着软件规模的不断扩大,程序员在编写代码时可能会忽略一些细节,导致代码逻辑不清晰、耦合度高、可读性差等问题。
文章浏览阅读1.9k次。在深度学习研究中,我们对于网络模型的学习过程的认识,大多是以一个黑盒的形式呈现出来的。网络结构中卷积层通过训练数据学习到怎样的特征,特征图是什么样的,对我们而言是隐晦难懂的,为此我们可以通过可视化特征图的方法,以图片的形式将网络结构中某一层特征图显示出来。环境:Tensorflow1.X需要的包:import matplotlib as plt from pylab import *过程,首先将网络中需要可视化网络层张量返回到加载模型的验证过程的文件中,然后将运行该张量,得到nump..._tensorflow自定义模型并可视化模型结构
文章浏览阅读848次。使用SolrJ操作Solr会比利用httpClient来操作Solr要简单。SolrJ通过封装httpClient方法,来操作solr的API的。即SolrJ底层还是通过使用httpClient中的方法来完成Solr的操作添加jar包:首先,你需要在你的web项目中添加SolrJ需要的jar包,这些jar包在你所下载的Solr包中都可以找到(我下载的是solr-4.10.0.zip),包括_solrj 操作solr
文章浏览阅读314次,点赞4次,收藏6次。慧天排水数字化分析平台针对城市排水系统基础设施数据管理的需求,以及水文、水力及水质模拟对数据的需求,实现了以数据库方式对相应数据的存储。可以对分流制排水系统及合流制排水系统进行地表水文、管网水力、水质过程的模拟计算。
文章浏览阅读204次。//巧妙实现数字间有空格,末尾没空格 int f=0; set<int >::iterator it; for(it=ans.begin();it!=ans.end();it++){ if(f) cout<<" "; else f=1; cout<< *it; }保留两位小数且四...
文章浏览阅读1.7w次,点赞3次,收藏10次。消息推送作为移动 APP 运营中的一项关键技术,已经被越来越广泛的运用。本文追溯了推送技术的发展历史,剖析了其核心原理,并对推送服务的关键技术进行深入剖析,围绕消息推送时产生的服务不稳定性,消息丢失、延迟,接入复杂性,统计缺失等问题,提供了一整套平台级的高可用消息推送解决方案。实践中,借助于该平台,不仅能提能显著提高消息到达率,还能提高研发效率,并道出了移动开发基础设施的平台化架构思路。推送基础..._消息推送平台的设计
文章浏览阅读6.4w次。FILCO:蓝牙键盘配对教程1 配对:ctrl + alt + fn 红蓝一起亮2 选择设备占用的数字(红灯闪烁,此时按下数字1或者2或者3或者你想要的数字)3 打开蓝牙 选择设备连接。然后会有pin码配对4 键盘上输入pin码,然后回车5 修改键盘 command和alt(即option)件位置。(默认alt键对应command位置)系统偏好配置->键盘->修饰键..._filco蓝牙配对教程
文章浏览阅读192次。小型超声波清洗机线路俩个大安培的IGBT功率管,确保了小型超声波清洗机线路开机避免瞬间冲击线路板造成烧坏,小型超声波清洗机线路多层保护,具有过压过载过流宝华等。小型超声波清洗机线路板线性脉冲方式驱动,超声波清洗换能器频率自动追踪且20khz-40khz无级可调,功率10-100%控制灵活,功率损耗低,恒功率输出稳定,适用于多种超声波清洗应用环境。小型超声波清洗机线路应用包括超声波清洗机、线路板超声波清洗、实验室用超声波清、镜头超声波清洗机等。_自制超声波清洗机主板
文章浏览阅读10w+次,点赞42次,收藏48次。今天瞎搞,不小心把vsCode 界面放大太多了。。。解决方法:Ctrl+ k Ctrl +s 进入快捷键设置。搜索 缩小 然后会出现缩小的快捷键按键缩小即可。 如果发现快捷键不管事。双击编辑。自定义快捷键。 我当时是 Ctrl+0 然后缩小的。 缩小完之后重置的快捷键_vdcode配置字体变大
文章浏览阅读536次,点赞2次,收藏3次。Linux EXT2文件系统_ext2explore
文章浏览阅读1.4k次。android中在做拍照获取图片和相册获取图片,因为android手机的版本多样性,和有些手机对rom的定制化,经常会出现再一个版本中可用,换成另外的版本或者手机就不兼容了,下面的代码是兼容性比较强的实现方式。基本试用现在主流的手机。再次记录下。package com.example.android.toyvpn;import java.io.File;import java.io._android carmerax 拍照获取bitmap