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

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
爱范儿
爱范儿
H
Help Net Security
V
Visual Studio Blog
J
Java Code Geeks
Stack Overflow Blog
Stack Overflow Blog
Microsoft Security Blog
Microsoft Security Blog
Apple Machine Learning Research
Apple Machine Learning Research
MyScale Blog
MyScale Blog
The Cloudflare Blog
Martin Fowler
Martin Fowler
D
Docker
腾讯CDC
F
Fortinet All Blogs
雷峰网
雷峰网
GbyAI
GbyAI
G
Google Developers Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Recent Announcements
Recent Announcements
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Blog — PlanetScale
Blog — PlanetScale
Engineering at Meta
Engineering at Meta
博客园 - 聂微东
博客园 - 叶小钗

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