文件上传前端和后端

vue前端

参考：el-upload

使用方法

<FileUpload :limit="1" @fileList="getFileList" />
<script>
  import FileUpload from '@/pages/models/filesupload/FileUpload.vue'
  export default {
    components: { FileUpload },
    data() {
      return {
        //文件列表信息
        fileList: [],}
    },
    methods: {
      //获取上传的文件信息
      getFileList(files) { 
        console.log('收到的文件列表',files);
        //做相关逻辑      
      },
      async tjSave(val){
        //添加formData数据
        console.log('this.form前', this.form);
        let formData = new FormData(); // new formData对象
        //添加修改的头像文件
        if (this.fileList.length > 0) {
          formData.append('file', this.fileList[0].raw)
        }
        //添加表单的数据
        formData.append('form', JSON.stringify(this.form))
        let res = await this.$api.base.pingyuFileNew(formData)
        }
    }
  }
</script>

el-upload二次封装

<template>
  <!-- 单个文件拖拽上传 -->
  <div class="tj-fileupload">
    <el-upload drag action="" :on-change="fileChange" :auto-upload="false" :limit="limit">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">一次只能最多上传{{limit}}个文件，且单个文件不超过40MB</div>
    </el-upload>
  </div>
</template>
<script>
export default {
  props: {
    // 上传文件数量限制
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
    }
  },
  methods: {
    fileChange(file, fileList) {
      console.log('当前上传的file', file);
      console.log('当前全部上传的fileList', fileList);
      this.$emit("fileList", fileList)
    },
  },
}
</script>
<style lang="less">
.tj-fileupload {
  .el-upload {
    width: 100%;
  }
  .el-upload-dragger {
    width: 100%;
  }
}
</style>

JAVA后端

新增

    /**
     * 新增
     *
     * @param form
     * @return
     */
    @PostMapping
    R<String> save(MultipartFile file, String form) throws IOException {
        if (StringUtils.isNotEmpty(form)) {
            //JSON字符串转JAVA对象
            BasePingyuFile basePingyuFile = JSON.parseObject(form, BasePingyuFile.class);
            if (basePingyuFileService.saveWithFile(file, basePingyuFile)) {
                return R.success("新增成功");
            }
        }
        return R.error("新增失败");
    }

新增程序

 /**
     * 文件新增带文件
     *
     * @param file           图片文件
     * @param basePingyuFile 实体类参数
     * @return Boolean
     */
    @Override
    public Boolean saveWithFile(MultipartFile file, BasePingyuFile basePingyuFile) throws IOException {
        try {
            //先保存到数据库,保存成功后，basePingyuFile会变成最新的数据，里面有id的信息
            save(basePingyuFile);
            log.info("保存后的数据内容：{}", basePingyuFile);
            //新增文件信息
            if (file != null && file.getSize() > 0) {
                //获取原始文件名的后缀
                String originalFilename = file.getOriginalFilename();
                log.info("文件名称:{}", originalFilename);
                String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
                //指定保存评语的路径
                String url = "TjFiles/pingyu/";
                //文件名称=店铺归属+ID+原文件后缀
                String filename = basePingyuFile.getShopbelong() + basePingyuFile.getId() + suffix;
                String filepath = TjFileUtils.handleUpFileRelativePath(file, url, filename);
                //把文件信息更新到表中
                basePingyuFile.setContenttype(suffix);
                basePingyuFile.setFilepath(filepath);
            }
            //再次更新,这里就不是新增了
            updateById(basePingyuFile);
            return true;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }

修改

    /**
     * 根据id修改信息
     *
     * @param file 图片文件
     * @param form 评语图片的form参数，是JSON字符串
     * @return
     */
    @PostMapping("/update")
    R<String> modify(MultipartFile file, String form) throws IOException {
        if (StringUtils.isNotEmpty(form)) {
            //JSON字符串转JAVA对象
            BasePingyuFile basePingyuFile = JSON.parseObject(form, BasePingyuFile.class);
            if (basePingyuFileService.updateWithFile(file,basePingyuFile)) {
                return R.success("修改成功");
            }
        }
        return R.error("修改失败");
    }

修改的程序

 /**
     * 文件更新带文件
     *
     * @param file           图片文件
     * @param basePingyuFile 实体类参数
     * @return Boolean
     */
    @Override
    public Boolean updateWithFile(MultipartFile file, BasePingyuFile basePingyuFile) {
        try {
            //更新文件信息
            if (file != null && file.getSize() > 0) {
                //获取原始文件名的后缀
                String originalFilename = file.getOriginalFilename();
                log.info("文件名称:{}", originalFilename);
                String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
                //指定保存评语的路径
                String url = "TjFiles/pingyu/";
                //文件名称=店铺归属+ID+原文件后缀
                String filename = basePingyuFile.getShopbelong() + basePingyuFile.getId() + suffix;
                String filepath = TjFileUtils.handleUpFileRelativePath(file, url, filename);
                //把文件信息更新到表中
                basePingyuFile.setContenttype(suffix);
                basePingyuFile.setFilepath(filepath);
            }
            //更新数据库
            updateById(basePingyuFile);
            return true;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }