前情说明:本代码暂时只供本人实用,可以实现效果,如大家有觉得需要改进或者可以用到的地方,可以随时给我建议和意见 谢谢
前端vue
按钮
点击添加说明
method
handleimport() { this.upload.title = "用户导入"; this.upload.open = true; },
data
data(){ return{ upload: { // 是否显示d出层(用户导入) open: false, // d出层标题(用户导入) title: "", // 是否禁用上传 isUploading: false, // 是否更新已经存在的用户数据 updateSupport: 0, // 设置上传的请求头部 headers: { Authorization: "Bearer " + getToken() }, // 上传的地址 url: process.env.VUE_APP_base_API + "/daq/filesub/importUrl" }, imageUrl: '', } }
d出框
将文件拖到此处,或点击上传 是否更新已经存在的用户数据 仅允许导入.png、.jpg、.jpeg格式的图片。 确 定 取 消
method
handleFileUploadProgress(event, file, fileList) { this.upload.isUploading = true; }, handleFileSuccess(response, file, fileList) { this.imageUrl = URL.createObjectURL(file.raw); console.log(this.imageUrl) this.upload.open = false; this.upload.isUploading = false; this.form.importsysRemark = this.imageUrl; this.$refs.upload.clearFiles(); this.getList(); }, submitFileForm() { this.$refs.upload.submit(); }
data(){ return{ // 表单参数 form: { id: null, importsysId: null, importsysName: null, importsysZid: null, importsysStage: null, importsysDutyBranch: null, importsysRelatedBranch: null, importsysInput: null, importsysOutput: null, importsysCreateTime: null, importsysUpdateTime: null, importsysRemark: null } } }
添加提交按钮
submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateimportsys(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addimportsys(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.fileadd = false; this.getList(); }); } } }); },
style
.avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; }
后端springboot
application
file: domain: http://localhost:${server.port}// enable: true path: D:picture # Spring配置 spring: # 资源信息 messages: # 国际化资源文件路径 basename: i18n/messages profiles: active: druid # 文件上传 servlet: multipart: # 单个文件大小 max-file-size: 10MB # 设置总上传的文件大小 max-request-size: 100MB
controller
@ApiOperation("图片上传") @ResponseBody @PreAuthorize("@ss.hasPermi('daq:filesub:importUrl')") @PostMapping("/importUrl") public String importData(@RequestParam("file") MultipartFile file) throws Exception { String filename = UUID.randomUUID().toString()+file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")); File filepath = new File("D:\picture\pic\" + filename); String url = String.valueOf(filepath); file.transferTo(filepath); System.err.println("图片存储地址是"+url); return url; }
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)