前情说明:本代码暂时只供本人实用，可以实现效果，如大家有觉得需要改进或者可以用到的地方，可以随时给我建议和意见 谢谢
前端vue
按钮
<el-buttonv-model="form.importsysRemark"type="warning"plainicon="el-icon-upload2"size="mini"@click="handleImport"v-hasPermi="['daq:filesub:importUrl']">点击添加说明</el-button>
method
/** 导入按钮操作 */handleImport() {this.upload.title = "用户导入";this.upload.open = true;},
data
data(){return{upload: {// 是否显示弹出层（用户导入）open: false,// 弹出层标题（用户导入）title: "",// 是否禁用上传isUploading: false,// 是否更新已经存在的用户数据updateSupport: 0,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/daq/filesub/importUrl"},imageUrl: '',}}
弹出框
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body><el-uploadref="upload":limit="1"accept=".png, .jpg, .jpeg":headers="upload.headers":action="upload.url + '?updateSupport=' + upload.updateSupport":disabled="upload.isUploading":on-progress="handleFileUploadProgress":on-success="handleFileSuccess":auto-upload="false"drag><img v-if="imageUrl" :src="imageUrl" class="avatar"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip text-center" slot="tip"><div class="el-upload__tip" slot="tip"><el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据</div><span>仅允许导入.png、.jpg、.jpeg格式的图片。</span></div></el-upload><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitFileForm">确 定</el-button><el-button @click="upload.open = false">取 消</el-button></div></el-dialog>
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
<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;}</style>
后端springboot
application
file:domain: http://localhost:${server.port}//enable: truepath: D:\picture# Spring配置spring:# 资源信息messages:# 国际化资源文件路径basename: i18n/messagesprofiles: active: druid# 文件上传servlet:multipart:# 单个文件大小max-file-size: 10MB# 设置总上传的文件大小max-request-size: 100MB
controller
/*** @Author: YangZhiSen* @Date: /12/14 9:58* @text: 文件上传到服务器*/@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;}
