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

推荐订阅源

Forbes - Security
Forbes - Security
GbyAI
GbyAI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
S
SegmentFault 最新的问题
Y
Y Combinator Blog
Recorded Future
Recorded Future
博客园 - Franky
I
InfoQ
T
The Blog of Author Tim Ferriss
Recent Announcements
Recent Announcements
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园_首页
阮一峰的网络日志
阮一峰的网络日志
T
Tailwind CSS Blog
Cyberwarzone
Cyberwarzone
The Register - Security
The Register - Security
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
雷峰网
雷峰网
P
Palo Alto Networks Blog
G
GRAHAM CLULEY
Cloudbric
Cloudbric
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
MongoDB | Blog
MongoDB | Blog
F
Full Disclosure
Google DeepMind News
Google DeepMind News
Recent Commits to openclaw:main
Recent Commits to openclaw:main
C
Check Point Blog
爱范儿
爱范儿
The GitHub Blog
The GitHub Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
W
WeLiveSecurity
T
Threat Research - Cisco Blogs
U
Unit 42
N
Netflix TechBlog - Medium
The Cloudflare Blog
Spread Privacy
Spread Privacy
Microsoft Azure Blog
Microsoft Azure Blog
美团技术团队
T
Troy Hunt's Blog
Engineering at Meta
Engineering at Meta
H
Heimdal Security Blog
TaoSecurity Blog
TaoSecurity Blog
C
Cybersecurity and Infrastructure Security Agency CISA
T
Tenable Blog
B
Blog
S
Securelist
H
Hacker News: Front Page
Google Online Security Blog
Google Online Security Blog
G
Google Developers Blog

博客园 - 大山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) {
    --------省略----------
}