springboot+vue+element-ui实现图文上传（表单文字和图片一起入库）

女爷i 2021-12-11 16:35 855阅读 0赞

前端页面：

<el-dialog title="添加图文" :visible.sync="dialogVisible">
          <el-form :model="configForm" ref="configForm" label-width="100px"
                   :rules="rules"
                   v-loading="loading2">
            <h3 class="title modal-headline">添加图文</h3>
            <el-form-item label=" 图文标题" prop="imgTitle">
              <el-input v-model="configForm.imgTitle"
                        type="text"
                        auto-complete="off" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="添加文字" prop="imgText">
              <el-input v-model="configForm.imgText"
                        type="textarea"
                        auto-complete="off" placeholder="请输入文字内容"></el-input>
            </el-form-item>
            <el-form-item label="添加图片" ref="uploadElement" prop="img">
              <el-input v-model="configForm.img" v-if="false"></el-input>
              <el-upload
                class="upload-demo"
                :on-success="handleAvatarSuccess"//这里是后台的回调信息
                accept="image/jpeg,image/jpg,image/png"//控制类型
                :action="materialPictureAndText()"//后台方法
                :auto-upload="false"//关闭自动上传
                :before-upload="beforeUpload2"//文件控制
                ref="upload"
                :on-change="handleChange"//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
                multiple
                :data="configForm"> //表单数据
                <el-button type="success" size="small">选择文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary"
                       @click="submitImg('configForm')" >确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </div>
        </el-dialog>

js:

submitImg (forName) {
            let self = this
            this.$confirm('此操作将无法撤回, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              self.$refs[forName].validate((valid) => {
                if (valid) {
                  self.$refs.upload.submit()
                  self.dialogVisible = false
                  self.loading2 = false
                } else {
                  return false
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消更新'
              })
            })
          },
    
          handleAvatarSuccess (response, file) {
            let self = this
            let resp = response
            console.log(response)
            if (resp.result === 200) {
              setTimeout(() => {
                self.dialogVisible = false//关闭弹窗
         
                self.$refs.upload.clearFiles()
                self.$message.success(resp.msg)//显示后台信息
                self.getImgData()//上传后刷新表单
              }, 1000)
            } else {
              self.$message.error(resp.msg)//显示后台信息
              self.$refs.upload.clearFiles()//清空表单
            }
          },
          materialPictureAndText () {
            return Config.context + '/pictureManage/materialPicture' //前面是为了方便线上加的
          },
          beforeUpload2 (file) {
            const isLt2M = file.size < 1024 * 1024 * 2
            // console.log('大小' + isLt2M)
            if (!isLt2M) {
              this.$message.error('上传文件大小不能超过 2MB!')
            }
            let size = file.size / 1024
            console.log('大小' + size)
            let _URL = window.URL || window.webkitURL
            let img = new Image()
            img.onload = function () {
              let width = img.width
              let height = img.height
              console.log('width--->' + width)
              console.log('height--->' + height)
            }
            img.src = _URL.createObjectURL(file)
            return isLt2M
          },

后台控制层：

@PostMapping(value = "materialPicture", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
        public Map<String, Object> materialPictureAndText(HttpServletRequest request,
                                                          @RequestParam(value = "imgTitle", required = false) String imgTitle,
                                                          @RequestParam(value = "file", required = false) MultipartFile file) {
    
            if (file.isEmpty()) {
                HashMap<String, Object> resultMap = new HashMap<>();
                resultMap.put("msg", "请上传图片");
                return resultMap;
            } else {
                String fileName = file.getOriginalFilename();  // 文件名
                String suffixName = fileName.substring(fileName.lastIndexOf("."));
                String filePath = path;//这个path就是你要存在服务器上的
                fileName = UUID.randomUUID() + suffixName; // 新文件名
                File dest = new File(filePath + fileName);
                if (!dest.getParentFile().exists()) {
                    dest.getParentFile().mkdirs();
                }
                try {
                    file.transferTo(dest);
                } catch (IOException e) {
                    e.printStackTrace();
                }
                Picture materialPicture = new Picture();
                materialPicture.setImgTitle(imgTitle);
                String filename = apiUrl + fileName;
                materialPicture.setPicture_url(filename);
                return pictureService.imgUpload(materialPicture);//这里就是上传图片返回的信息，成功失败异常等，前端根据字段接收就是了
            }
        }

关于图片的显示，我是用了tomcat服务器，应该用其他也一样的，在代码里配置映射路径

先在配置文件中：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE4NTEw_size_16_color_FFFFFF_t_70][]

在写一个配置文件配置映射路径，然后在tomcat下面跑即可：

@Configuration
    public class MyWebAppConfigurer implements WebMvcConfigurer {
    
        @Value("${file.staticAccessPath}")
        private String staticAccessPath;
        @Value("${file.uploadFolder}")
        private String uploadFolder;
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);
            WebMvcConfigurer.super.addResourceHandlers(registry);
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE4NTEw_size_16_color_FFFFFF_t_70]: /images/20211211/19be49df96294c8eab0cf74ca9184774.png