vue+element-ui怎么把表单数据和图片一起提交到后端呢?能获取图片大小和名称么?
4条回答 默认 最新
关注
直接上代码吧,满意希望给我采纳,谢谢
<el-dialog :title="'添加'" :visible.sync="formVisibleAdd" :close-on-click-modal="false" width="30%" @close="closeDialogAdd"> <el-form :model="addForm" label-width="100px" :rules="rules" ref="addForm"> <el-form-item label="名称" prop="name"> <el-input v-model="addForm.name" placeholder="请输入名称" /> </el-form-item> <el-form-item label="编号" prop="code"> <el-input type="text" v-model="addForm.code" placeholder="请输入编号" /> </el-form-item> <el-form-item label="图片"> <el-upload class="upload-demo" accept="image/jpeg,image/jpg,image/png" :auto-upload="false" ref="upload" action="" :on-change="uploadSectionFile" :on-remove="removeImage" list-type="picture"> <el-button size="small" type="primary" v-show="isUploadShowHide">点击上传</el-button> <div slot="tip" class="el-upload__tip" v-show="isUploadShowHide" style="margin-top: -40px;idth: 300px;margin-left: 100px;text-align: left;color: red;">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="closeDialogAdd">取消</el-button> <el-button type="primary" @click.native="handleSubmitAdd" :loading="formLoading">提交</el-button> </div> </el-dialog> let handleSubmitAdd = function() { if (this.formLoading) { return } this.$refs.addForm.validate(valid => { if (!valid) { return } this.formLoading = true var formData = new FormData; formData.append('name', this.addForm.name); formData.append('code', this.addForm.code); formData.append('file', this.uploadFile); let config = { headers: { 'Content-Type': 'multipart/form-data' } }; this.$axios.post('http://localhost:8090/xx/xx/insert', formData, config) .then((res) => { if (res.data.code === 0) { this.formLoading = false this.$refs.upload.clearFiles(); this.formVisibleAdd = false } }) .catch((res) => { }) }) } @PostMapping(value = "insert", produces = MediaType.APPLICATION_JSON_UTF8_VALUE) public CommResult insertTableTeam(HttpServletRequest request, @RequestParam(value = "name", required = false) String name, @RequestParam(value = "code", required = false) String code, @RequestParam(value = "file", required = false) MultipartFile file) { String rootPath = request.getSession().getServletContext().getRealPath("/"); if (file != null) { String fileName = file.getOriginalFilename(); if (fileName != null && fileName.trim().length() > 0) { String newFileName = FileUtil.uploadFile(rootPath, fileName, file); } } //TODO 添加 return "success"; }
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 4无用 1
悬赏问题
- ¥15 关于arduino编程toCharArray()函数的使用
- ¥100 vc++混合CEF采用CLR方式编译报错
- ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
- ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
- ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
- ¥50 如何openEuler 22.03上安装配置drbd
- ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
- ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
- ¥15 Windows11, backspace, enter, space键失灵
- ¥15 cfx离心泵非稳态计算