devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue+spring boot实现文件上传_springboot vue文件上传

作者：AllinToyou | 2024-03-21 23:54:36

赞

踩

springboot vue文件上传

目录

1.前端画面

2.后端

3.总结

1.前端画面

  1. <template>
  2.   <div class="app-container">
  3.  
  4.     <el-descriptions title="入区信息" border style="margin-bottom: 20px">
  5.       <el-descriptions-item label="申报平台名称">{{ showDescription.companyName }}</el-descriptions-item>
  6.       <el-descriptions-item label="主管关区">
  7.       <dict-tag :options="dict.type.master_cuscd" :value="showDescription.masterCuscd"/>
  8.       </el-descriptions-item>
  9.       <el-descriptions-item label="核放单编号">{{ showDescription.passportNo }}</el-descriptions-item>
  10.       <el-descriptions-item label="承运车牌号">{{ showDescription.vehicleNo }}</el-descriptions-item>
  11.       <el-descriptions-item label="申报入区日期">{{ showDescription.declInputDate }}</el-descriptions-item>
  12.     </el-descriptions>
  13.  
  14.     <el-row :gutter="10" class="mb8">
  15.       <el-col :span="1.5">
  16.         <el-button
  17.           type="danger"
  18.           plain
  19.           icon="el-icon-delete"
  20.           size="mini"
  21.           :disabled="multiple"
  22.           @click="handleDelete"
  23.           v-hasPermi="['goodsManage:storageInDetail:remove']"
  24.         >删除
  25.         </el-button>
  26.       </el-col>
  27.       <el-col :span="1.5">
  28.         <el-button
  29.           type="success"
  30.           plain
  31.           icon="el-icon-upload"
  32.           size="mini"
  33.           @click="handleImport"
  34.         >导入
  35.         </el-button>
  36.       </el-col>
  37.       <el-col :span="1.5">
  38.         <el-button
  39.           type="warning"
  40.           plain
  41.           icon="el-icon-download"
  42.           size="mini"
  43.           @click="handleExport"
  44.           v-hasPermi="['goodsManage:storageInDetail:export']"
  45.         >导出
  46.         </el-button>
  47.       </el-col>
  48.       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  49.     </el-row>
  50.  
  51.     <el-table v-loading="loading" :data="storageInDetailList" @selection-change="handleSelectionChange">
  52.       <el-table-column type="selection" width="55" align="center" />
  53.       <el-table-column label="序号" align="center" type="index" fixed/>
  54.       <el-table-column label="核放单编号" align="center" prop="passportNo" width="240" />
  55.       <el-table-column label="申报平台名称" align="center" prop="companyName" width="200" show-overflow-tooltip/>
  56.       <el-table-column label="料号" align="center" prop="itemRecordNo" width="150"/>
  57.       <el-table-column label="商品编码" align="center" prop="gcode" width="150"/>
  58.       <el-table-column label="商品名称" align="center" prop="gname" width="150" show-overflow-tooltip/>
  59.       <el-table-column label="申报计量单位" align="center" prop="unit" width="100"/>
  60.       <el-table-column label="申报数量" align="center" prop="qty"/>
  61.       <el-table-column label="货物毛重" align="center" prop="grossWeight"/>
  62.       <el-table-column label="货物净重" align="center" prop="netWeight"/>
  63.       <el-table-column label="备注" align="center" prop="note"/>
  64.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
  65.         <template slot-scope="scope">
  66.           <el-button
  67.             size="mini"
  68.             type="text"
  69.             icon="el-icon-edit"
  70.             @click="handleUpdate(scope.row)"
  71.             v-hasPermi="['goodsManage:storageInDetail:edit']"
  72.             v-if="false"
  73.           >修改
  74.           </el-button>
  75.           <el-button
  76.             size="mini"
  77.             type="text"
  78.             icon="el-icon-delete"
  79.             @click="handleDelete(scope.row)"
  80.             v-hasPermi="['goodsManage:storageInDetail:remove']"
  81.           >删除
  82.           </el-button>
  83.         </template>
  84.       </el-table-column>
  85.     </el-table>
  86.  
  87.     <pagination
  88.       v-show="total>0"
  89.       :total="total"
  90.       :page.sync="queryParams.pageNum"
  91.       :limit.sync="queryParams.pageSize"
  92.       @pagination="getList"
  93.     />
  94.  
  95.     <!-- 添加或修改国内低值货物入区子表对话框 -->
  96.     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
  97.       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  98.         <el-form-item label="入区主表id" prop="pid">
  99.           <el-input v-model="form.pid" placeholder="请输入入区主表id"/>
  100.         </el-form-item>
  101.         <el-form-item label="核放单编号" prop="passportNo">
  102.           <el-input v-model="form.passportNo" placeholder="请输入核放单编号"/>
  103.         </el-form-item>
  104.         <el-form-item label="申报平台id" prop="companyId">
  105.           <el-input v-model="form.companyId" placeholder="请输入申报平台id"/>
  106.         </el-form-item>
  107.         <el-form-item label="申报平台名称" prop="companyName">
  108.           <el-input v-model="form.companyName" placeholder="请输入申报平台名称"/>
  109.         </el-form-item>
  110.         <el-form-item label="料号" prop="itemRecordNo">
  111.           <el-input v-model="form.itemRecordNo" placeholder="请输入料号"/>
  112.         </el-form-item>
  113.         <el-form-item label="商品编码" prop="gcode">
  114.           <el-input v-model="form.gcode" placeholder="请输入商品编码"/>
  115.         </el-form-item>
  116.         <el-form-item label="商品名称" prop="gname">
  117.           <el-input v-model="form.gname" placeholder="请输入商品名称"/>
  118.         </el-form-item>
  119.         <el-form-item label="申报计量单位" prop="unit">
  120.           <el-input v-model="form.unit" placeholder="请输入申报计量单位"/>
  121.         </el-form-item>
  122.         <el-form-item label="申报数量" prop="qty">
  123.           <el-input v-model="form.qty" placeholder="请输入申报数量"/>
  124.         </el-form-item>
  125.         <el-form-item label="货物毛重" prop="grossWeight">
  126.           <el-input v-model="form.grossWeight" placeholder="请输入货物毛重"/>
  127.         </el-form-item>
  128.         <el-form-item label="货物净重" prop="netWeight">
  129.           <el-input v-model="form.netWeight" placeholder="请输入货物净重"/>
  130.         </el-form-item>
  131.         <el-form-item label="备注" prop="note">
  132.           <el-input v-model="form.note" type="textarea" placeholder="请输入内容"/>
  133.         </el-form-item>
  134.       </el-form>
  135.       <div slot="footer" class="dialog-footer">
  136.         <el-button type="primary" @click="submitForm">确 定</el-button>
  137.         <el-button @click="cancel">取 消</el-button>
  138.       </div>
  139.     </el-dialog>
  140.     <!-- 上传文件对话框 -->
  141.     <upload-dialog :info="info" ref="uploadDialog"/>
  142.   </div>
  143. </template>
  144.  
  145. <script>
  146. import {
  147.   listStorageInDetail,
  148.   getStorageInDetail,
  149.   delStorageInDetail,
  150.   addStorageInDetail,
  151.   updateStorageInDetail
  152. } from "@/api/goodsManage/storageInDetail";
  153. import {getStorageInMaster} from "@/api/goodsManage/storageInMaster";
  154.  
  155. export default {
  156.   name: "StorageInDetail",
  157.   dicts: ['master_cuscd'],
  158.   data() {
  159.     return {
  160.       // 遮罩层
  161.       loading: true,
  162.       // 选中数组
  163.       ids: [],
  164.       // 非单个禁用
  165.       single: true,
  166.       // 非多个禁用
  167.       multiple: true,
  168.       // 显示搜索条件
  169.       showSearch: true,
  170.       // 总条数
  171.       total: 0,
  172.       // 国内低值货物入区子表表格数据
  173.       storageInDetailList: [],
  174.       //画面头显示
  175.       showDescription: {},
  176.       // 弹出层标题
  177.       title: "",
  178.       // 是否显示弹出层
  179.       open: false,
  180.       /**导入相关参数*/
  181.       info: {
  182.         url: "/goodsManage/storageInDetail/import",
  183.         title: "入区货物明细导入",
  184.         open: false,
  185.         params: null
  186.       },
  187.       // 查询参数
  188.       queryParams: {
  189.         pageNum: 1,
  190.         pageSize: 10,
  191.         pid: null,
  192.         passportNo: null,
  193.         companyId: null,
  194.         companyName: null,
  195.         itemRecordNo: null,
  196.         gcode: null,
  197.         gname: null,
  198.         unit: null,
  199.         qty: null,
  200.         grossWeight: null,
  201.         netWeight: null,
  202.         note: null,
  203.       },
  204.       // 表单参数
  205.       form: {},
  206.       // 表单校验
  207.       rules: {}
  208.     };
  209.   },
  210.   created() {
  211.     this.queryParams.pid = this.$route.params && this.$route.params.id;
  212.     this.getMasterInfo();
  213.     this.getList();
  214.   },
  215.   watch: {
  216.     //监听上传组件弹框关闭
  217.     'info.open': {
  218.       immediate: false,
  219.       handler: function (val) {
  220.         if (!val) {
  221.           //刷新列表
  222.           this.loading = true;
  223.           setTimeout(this.handleQuery, 2000);
  224.         }
  225.       }
  226.     }
  227.   },
  228.   methods: {
  229.     /** 查询国内低值货物入区主表列表 */
  230.     getMasterInfo(){
  231.       getStorageInMaster(this.queryParams.pid).then(response =>{
  232.         this.showDescription = response.data;
  233.       })
  234.     },
  235.     /** 查询国内低值货物入区子表列表 */
  236.     getList() {
  237.       this.loading = true;
  238.       listStorageInDetail(this.queryParams).then(response => {
  239.         this.storageInDetailList = response.rows;
  240.         this.total = response.total;
  241.         this.loading = false;
  242.       });
  243.     },
  244.     // 取消按钮
  245.     cancel() {
  246.       this.open = false;
  247.       this.reset();
  248.     },
  249.     // 表单重置
  250.     reset() {
  251.       this.form = {
  252.         id: null,
  253.         pid: null,
  254.         passportNo: null,
  255.         companyId: null,
  256.         companyName: null,
  257.         itemRecordNo: null,
  258.         gcode: null,
  259.         gname: null,
  260.         unit: null,
  261.         qty: null,
  262.         grossWeight: null,
  263.         netWeight: null,
  264.         note: null,
  265.         createBy: null,
  266.         createTime: null,
  267.         updateBy: null,
  268.         updateTime: null
  269.       };
  270.       this.resetForm("form");
  271.     },
  272.     /** 搜索按钮操作 */
  273.     handleQuery() {
  274.       this.queryParams.pageNum = 1;
  275.       this.getList();
  276.     },
  277.     /** 重置按钮操作 */
  278.     resetQuery() {
  279.       this.resetForm("queryForm");
  280.       this.handleQuery();
  281.     },
  282.     /**导入处理*/
  283.     handleImport() {
  284.       this.info.open = true;
  285.       this.info.params = {pid: this.queryParams.pid};
  286.     },
  287.     // 多选框选中数据
  288.     handleSelectionChange(selection) {
  289.       this.ids = selection.map(item => item.id)
  290.       this.single = selection.length !== 1
  291.       this.multiple = !selection.length
  292.     },
  293.     /** 新增按钮操作 */
  294.     handleAdd() {
  295.       this.reset();
  296.       this.open = true;
  297.       this.title = "添加国内低值货物入区子表";
  298.     },
  299.     /** 修改按钮操作 */
  300.     handleUpdate(row) {
  301.       this.reset();
  302.       const id = row.id || this.ids
  303.       getStorageInDetail(id).then(response => {
  304.         this.form = response.data;
  305.         this.open = true;
  306.         this.title = "修改国内低值货物入区子表";
  307.       });
  308.     },
  309.     /** 提交按钮 */
  310.     submitForm() {
  311.       this.$refs["form"].validate(valid => {
  312.         if (valid) {
  313.           if (this.form.id != null) {
  314.             updateStorageInDetail(this.form).then(response => {
  315.               this.$modal.msgSuccess("修改成功");
  316.               this.open = false;
  317.               this.getList();
  318.             });
  319.           } else {
  320.             addStorageInDetail(this.form).then(response => {
  321.               this.$modal.msgSuccess("新增成功");
  322.               this.open = false;
  323.               this.getList();
  324.             });
  325.           }
  326.         }
  327.       });
  328.     },
  329.     /** 删除按钮操作 */
  330.     handleDelete(row) {
  331.       const ids = row.id || this.ids;
  332.       this.$modal.confirm('是否确认删除国内低值货物入区子表编号为"' + ids + '"的数据项？').then(function () {
  333.         return delStorageInDetail(ids);
  334.       }).then(() => {
  335.         this.getList();
  336.         this.$modal.msgSuccess("删除成功");
  337.       }).catch(() => {
  338.       });
  339.     },
  340.     /** 导出按钮操作 */
  341.     handleExport() {
  342.       this.download('goodsManage/storageInDetail/export', {
  343.         ...this.queryParams
  344.       }, `storageInDetail_${new Date().getTime()}.xlsx`)
  345.     },
  346.     selectCompany(val) {
  347.       this.queryParams.companyId = val;
  348.       this.handleQuery();
  349.     }
  350.   }
  351. };
  352. </script>

上传组件

  1. <template>
  2.   <el-dialog v-dialog-drag ref="uploadDialog" :title="info.title" :visible.sync="info.open" width="500px"
  3.              append-to-body>
  4.     <el-upload
  5.       drag
  6.       accept=".xls, .xlsx"
  7.       action="#"
  8.       :show-file-list="false"
  9.       :http-request="requestUpload"
  10.       :before-upload="beforeUpload">
  11.       <i class="el-icon-upload"></i>
  12.       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  13.       <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
  14.     </el-upload>
  15.   </el-dialog>
  16. </template>
  17. <script>
  18. import {upload} from "@/api/tool/upload";
  19.  
  20. export default {
  21.   props: {
  22.     info: {
  23.       url: null,
  24.       title: null,
  25.       open: Boolean,
  26.       params: null
  27.     }
  28.   },
  29.   data() {
  30.     return {
  31.       // 上传参数
  32.       upload: {
  33.         file: null,
  34.         updateSupport: true,
  35.         params: null
  36.       }
  37.     };
  38.   },
  39.   methods: {
  40.     beforeUpload(file) {
  41.       this.upload.file = file;
  42.       if (this.info.params) {
  43.         this.upload.params = JSON.stringify(this.info.params);
  44.       }
  45.     },
  46.     requestUpload() {
  47.       let formData = new FormData();
  48.       formData.append("file", this.upload.file);
  49.       formData.append("updateSupport", this.upload.updateSupport);
  50.       formData.append("params", this.upload.params);
  51.       upload(this.info.url, formData).then(response => {
  52.         this.info.open = false;
  53.         this.$modal.msgSuccess("导入成功");
  54.       });
  55.     },
  56.   }
  57. };
  58. </script>

上传组件js

  1. import request from "@/utils/request";
  2.  
  3. /**
  4.  * 上传文件
  5.  * @param data
  6.  * @returns {AxiosPromise}
  7.  */
  8. export function upload(url,data) {
  9.   return request({
  10.     url: url,
  11.     method: 'post',
  12.     data: data
  13.   })
  14. }

2.后端

  1.     /**
  2.      * @param file
  3.      * @param params
  4.      * @return
  5.      * @throws Exception
  6.      */
  7.     @PreAuthorize("@ss.hasPermi('goodsManage:storageInDetail:add')")
  8.     @Log(title = "国内低值货物入区子表", businessType = BusinessType.IMPORT)
  9.     @PostMapping("/import")
  10.     public AjaxResult importExcel(@RequestParam("file") MultipartFile file, String params) throws Exception {
  11.         storageInDetailService.importMaster(file, params);
  12.         return AjaxResult.success();
  13.     }
  1.     @Override
  2.     @Transactional(rollbackFor = Exception.class)
  3.     public int importMaster(MultipartFile file, String params) throws Exception {
  4.         //导入校验是否主表已经审核通过,审核通过不允许再次导入
  5.         checkMasterApproveType(params);
  6.         //读取Excel信息
  7.         DynamicHeaderListener parseListener = new DynamicHeaderListener();
  8.         EasyExcel.read(file.getInputStream(), parseListener).sheet("表体").headRowNumber(2).doReadSync();
  9.         List<Map<Integer, String>> dataList = parseListener.getList();
  10.         if (CollUtil.isEmpty(dataList)) {
  11.             log.error("读入的入区明细为空");
  12.             throw new MultipartException("读入的入区明细为空，请重新导入");
  13.         }
  14.         JSONObject param = JSON.parseObject(params);
  15.         Long pid = param.getLongValue("pid");
  16.         //查询主表信息
  17.         StorageInMaster storageInMaster = storageInMasterService.getById(pid);
  18.         if (ObjectUtil.isEmpty(storageInMaster)) {
  19.             log.error("入区信息不存在");
  20.             throw new MultipartException("入区信息不存在，请确认");
  21.         }
  22.         List<StorageInDetail> details = new ArrayList<>();
  23.         dataList.forEach(item -> {
  24.             StorageInDetail storageInDetail = new StorageInDetail();
  25.             //入区主表id
  26.             storageInDetail.setPid(pid);
  27.             //核放单编号
  28.             storageInDetail.setPassportNo(storageInMaster.getPassportNo());
  29.             //申报平台id
  30.             storageInDetail.setCompanyId(storageInMaster.getCompanyId());
  31.             //申报平台名称
  32.             storageInDetail.setCompanyName(storageInMaster.getCompanyName());
  33.             //料号
  34.             storageInDetail.setItemRecordNo(item.get(2));
  35.             //商品编码
  36.             storageInDetail.setGcode(item.get(3));
  37.             //商品名称
  38.             storageInDetail.setGname(item.get(4));
  39.             //申报计量单位
  40.             storageInDetail.setUnit(item.get(5));
  41.             //申报数量
  42.             storageInDetail.setQty(BigDecimal.valueOf(Long.parseLong(item.get(6))));
  43.             //货物毛重
  44.             storageInDetail.setGrossWeight(Convert.toBigDecimal(item.get(7), BigDecimal.ZERO));
  45.             //货物净重
  46.             storageInDetail.setNetWeight(Convert.toBigDecimal(item.get(8), BigDecimal.ZERO));
  47.             //备注
  48.             storageInDetail.setNote(item.get(9));
  49.             //创建人
  50.             storageInDetail.setCreateBy(SecurityUtils.getUserId().toString());
  51.  
  52.             details.add(storageInDetail);
  53.         });
  54.         BigDecimal declQty = new BigDecimal(0);
  55.         for (StorageInDetail insertData : details) {
  56.             this.save(insertData);
  57.             declQty = declQty.add(insertData.getQty());
  58.         }
  59.         StorageInMaster updateMaster = new StorageInMaster();
  60.         updateMaster.setDeclQty(declQty);
  61.         updateMaster.setId(pid);
  62.         storageInMasterService.updateById(updateMaster);
  63.         return 1;
  64.     }

3.总结

上传文件时，要使用 FormData() 构造函数，将上传的文件及参数封装在FormData()中，同时浏览器会自动识别并添加请求头 "Content-Type: multipart/form-data"，且参数依然像是表单提交时的那种键值对儿，此外 FormData() 构造函数 new 时可以直接传入 form 表单的 dom 节点。注意使用post请求，后端接收的时候可以使用requestParam，也可以不使用。

Content-Type: multipart/form-data，这种类型是后来追加的。为什么要新增一个类型，而不使用旧有的application/x-www-form-urlencoded：因为旧有类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端，二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了，专门用于有效的传输文件。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/283687
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号