vue+element-ui怎么把表单数据和图片一起提交到后端呢?能获取图片大小和名称么?
课程设计
1
vue+element-ui怎么把表单数据和图片一起提交到后端呢?能获取图片大小和名称么?
-
直接上代码吧
<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 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" v-show="isUploadShowHide" >只能上传jpg/png文件,且不超过500kb</div> </el-upload> </el-form-item> </el-form> <div slot="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"; }
发表回复