惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

W
WeLiveSecurity
T
Tenable Blog
Project Zero
Project Zero
C
Cybersecurity and Infrastructure Security Agency CISA
T
The Exploit Database - CXSecurity.com
P
Palo Alto Networks Blog
S
Schneier on Security
Scott Helme
Scott Helme
S
Securelist
Know Your Adversary
Know Your Adversary
Vercel News
Vercel News
IT之家
IT之家
V
V2EX
F
Fortinet All Blogs
Simon Willison's Weblog
Simon Willison's Weblog
K
Kaspersky official blog
博客园_首页
T
Tailwind CSS Blog
The GitHub Blog
The GitHub Blog
Spread Privacy
Spread Privacy
Microsoft Security Blog
Microsoft Security Blog
Cisco Talos Blog
Cisco Talos Blog
The Register - Security
The Register - Security
有赞技术团队
有赞技术团队
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Cyberwarzone
Cyberwarzone
Google DeepMind News
Google DeepMind News
The Hacker News
The Hacker News
L
LINUX DO - 热门话题
Hugging Face - Blog
Hugging Face - Blog
博客园 - 三生石上(FineUI控件)
A
Arctic Wolf
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
C
CXSECURITY Database RSS Feed - CXSecurity.com
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
T
Threat Research - Cisco Blogs
P
Proofpoint News Feed
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
P
Privacy & Cybersecurity Law Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
CERT Recently Published Vulnerability Notes
S
SegmentFault 最新的问题
AWS News Blog
AWS News Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
罗磊的独立博客
Apple Machine Learning Research
Apple Machine Learning Research
P
Proofpoint News Feed
The Cloudflare Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
V
Vulnerabilities – Threatpost

博客园 - 大山008

若依导出excel时decimal数据千分位格式化 SpringBoot如何引入deepseek-多轮对话 EasyExcel实现百万级数据导入导出 SpringAMQP整合RabbitMQ使用 win11安装redis步骤详解 ftp与sftp工具类 stream流的一些常用用法 子类的toString方法如何打印父类的属性 MySQL常见的几种优化方案 关于若依AsyncFactory的一些思考,记录一下 Vue 路由跳转、路由传参、跳转区别、传值取值 MYSQL中substring_index()用法 mybatis sql 解决 in 参数过多的问题 MySQL之json数据操作 mybatis查询返回map键值对的问题 validate校验,记录一种思路 Java微信转发及网络检测 生成带有二维码的海报 java将指定文件夹下面的所有图片压缩到指定大小以内并保存图片 Lock与ReentrantLock、Synchronized
在vue中用multipart/form-data方式上传文件并同表单同步提交数据
大山008 · 2023-02-10 · via 博客园 - 大山008

项目是基于若依开发

1、dialog页面内容

 <el-dialog :title="viewDataTitle" :visible.sync="viewDataOpen" width="600px" append-to-body>
      <el-form ref="viewDataForm" :model="viewDataForm" label-width="100px">
        <el-form-item label="视图选择" prop="type">
          <el-select v-model="viewDataForm.type" placeholder="请选择视图" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                       :value="item.value" @click.native="seletChange(item)" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视图名称" prop="viewName" v-if="isShowFir">
          <el-input v-model="viewDataForm.viewName" placeholder="请输入视图名称" />
        </el-form-item>
        <el-form-item label="导入文件" prop="uploadFile" v-show="isShowSec">
          <el-upload class="upload-demo" v-model="viewDataForm.uploadFile" ref="viewDataUpload" 
:limit="1" action="uploadAction" :data="viewDataForm" :headers="viewDataUpload.headers"
:on-exceed="viewHandleExceed"
:auto-upload="false"
:on-error="viewUploadError"
:before-upload="viewHandleBeforeUpload" :on-change="changeFile" :on-remove="viewHandleRemove" :file-list="uploadFile"> <el-button plain size="mini" type="primary">选择文件</el-button> </el-upload> </el-form-item> <el-form-item label="数据" prop="viewVal" v-show="isShowThird"> <el-input v-model="viewDataForm.viewVal" placeholder="请输入数据" /> </el-form-item> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="viewDataSubmitForm">确 定</el-button> <el-button @click="viewDataCancel">取 消</el-button> </div> </el-dialog>

2、data部分

   //是否显示外省弹出层
   viewDataOpen: false,
   //外省弹出层标题
   viewDataTitle: "",
   //外省文件上传
   viewDataUpload: {
       headers: {
             "Content-Type": "multipart/form-data",
             Authorization: "Bearer " + getToken()
       },
   },
   uploadFile: [],
   //表单参数
   viewDataForm:{},

3、methods

 viewDataHandleUpload() {
            this.viewReset();
            this.viewDataOpen = true;
            this.viewDataTitle = "首页视图数据录入";
            -----省略-----
          },
          viewHandleExceed(files, fileList) {
            this.$message.error("只能长传一个文件!");
          },
          viewHandleRemove(file, fileList) {
            this.$message.error("删除成功!");
          },
          // 图片上传失败时
          viewUploadError() {
            this.$message.error("图片上传失败!");
          },
          //上传之前
          viewHandleBeforeUpload(file) {

          },
          changeFile(file, fileList) {
            this.viewDataForm.uploadFile = fileList[0].raw
          },
          // 表单重置
          viewReset() {
            this.viewDataForm = {
              type: null,
              viewName: null,
              viewVal: null,
              --------省略-------
            };
            this.uploadFile = [];
          },
          viewDataCancel() {
            this.viewDataOpen = false;
            this.viewReset();
          },
          seletChange(data) {
              --------省略----------
          },
          viewDataSubmitForm() {
            this.$refs["viewDataForm"].validate(valid => {
              if (valid) {
                let forms = new FormData();
                //该数据类型默认参数Content-Type:multipart/form-data
                forms.append("uploadFile",this.viewDataForm.uploadFile);
                forms.append("type", this.viewDataForm.type);
                forms.append("viewName", this.viewDataForm.viewName);
                forms.append("viewVal", this.viewDataForm.viewVal);
                saveViewData(forms).then(response => {
                    this.$modal.msgSuccess("录入成功");
                    this.viewDataOpen = false;
                  });
              }
            });
          },

4.后台接收

@PostMapping("/saveView")
public AjaxResult saveView(ViewDataVo viewData,@RequestParam(value = "uploadFile",required = false) MultipartFile uploadFile) {
    --------省略----------
}