上传图片：点击按钮后进入对话框，点击➕号直接上传图片，点击确定即保存

一、前言

　　一般上传图片时，是点击编辑按钮，弹出对话框，然后在对话框中点击上传按钮，弹出上传图片的对话框，点击加号即可上传，点击确定，图片就会上传到指定地点，再点击确定，就会保存信息到后台。如下图所示：

 

 现在的需求：在列表页面，直接点击上传按钮，就可以弹出上传图片的对话框，点击加号直接上传，点击确认就可以将图片信息绑定到t_attach表中。如下所示：

点击上传质检报告

二、前端代码

1、父组件代码

template

<el-table-column label="质检报告" align="center" width="160">
        <template slot-scope="scope">
          <quality-report :editable="true" :limit="10"
                          :key-id="scope.row.id"
                          business-type="T_OUTPUT_XX"
                          sub-type="QUALITY_REPORT"
                          name="上传质检报告"
                          style="float: right" />
        </template>
      </el-table-column>

script

import QualityReport from './QualityReport'
components: { QualityReport },

2、子组件代码

<template>
  <div class="upload-container">
    <el-button icon="el-icon-upload" size="mini" type="primary" @click="initPage">{{name}}({{fileList.length}})</el-button>
    <el-dialog title="质检报告" :visible.sync="dialogVisible" append-to-body @close="closeDialog">
      <el-upload action="#" class="editor-slide-upload" list-type="picture-card" :disabled="!editable" :multiple="true"
        :file-list="files" :show-file-list="true" :on-progress="filesUpload" :on-remove="fileRemove"
        :on-success="handleSuccess" :before-upload="beforeUpload" :on-preview="handlePictureCardPreview"
        :on-exceed="handleExceed" v-bind="$attrs" ref="el-upload-button">
        <i class="el-icon-plus"></i>
      </el-upload>
      <div v-if="editable">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { nfsFileApi } from "@/api/base/nfsFileApi";
  import fileDownload from 'js-file-download'
  import {prepare} from "@/api/coordination/prepare";
  import Pagination from "@/components/Pagination";
  import EditorImage from '@/components/PtsUpload/FileUpload';
  import { tcode } from '@/api/slzz/eGelatinBeads/eGelatinBeadsCode'
  export default {
    name: "QualityReport",
    components: {Pagination,EditorImage},
    props: {
      name: {
        type: String,
        default: "文件"
      },
      editable: {
        type: Boolean,
        default: false
      },
      businessType: {
        type: String,
        default: ""
      },
      subType: {
        type: String,
        default: ""
      },
      keyId: {
        type: Number,
        default: 0
      },
      fileList: {
        type: Array,
        default: function () {
          return [];
        }
      },
      fileType:{
        type: String,
        default: null
      },
    },
    data() {
      return {
        dialogVisible: false,
        files: [],
        file: null,
        dialogImageUrl: null,
        dialogVisibleMax: false,
        listLoading: false,
        list: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 10
        },
      };
    },
    created() {
      this.queryPic();
    },
    methods: {
      queryPic() {
        if (this.keyId === null) {
          this.keyId = 0;
        }
        if (this.fileList === null) {
          this.fileList = [];
        }
        this.files = [];
        this.fileList.forEach(f => {
          if (this.subType == f.subType) {
            let fileEntity = {
              originName: f.originName,
              fileName: f.fileName,
              compressedName: f.compressedName,
              uploadPath: f.uploadPath,
              fileId: f.fileId
            };
            this.showFile(fileEntity);
          }
        });
        const query = {
          businessType: this.businessType,
          subType: this.subType,
          keyId: this.keyId
        };
        nfsFileApi.getFileList(query).then(response => {
          if (response.success) {
            if (response.data.length !== 0) {
              response.data.forEach(f => {
                let fileEntity = {
                  originName: f.originName,
                  fileName: f.fileName,
                  compressedName: f.compressedName,
                  uploadPath: f.uploadPath,
                  fileId: f.fileId
                };
                this.showFile(fileEntity);
              });
            }
          }
        });
      },
      /**
       * 初始化查询图片
       */
      initPage() {
        if (this.keyId === null) {
          this.keyId = 0;
        }
        if (this.fileList === null) {
          this.fileList = [];
        }
        this.files = [];
        this.dialogVisible = true;
        this.fileList.forEach(f => {
          if (this.subType == f.subType) {
            let fileEntity = {
              originName: f.originName,
              fileName: f.fileName,
              compressedName: f.compressedName,
              uploadPath: f.uploadPath,
              fileId: f.fileId
            };
            this.showFile(fileEntity);
          }
        });
        const query = {
          businessType: this.businessType,
          subType: this.subType,
          keyId: this.keyId
        };
        console.log(query)
        nfsFileApi.getFileList(query).then(response => {
          if (response.success) {
            if (response.data.length !== 0) {
              response.data.forEach(f => {
                let fileEntity = {
                  originName: f.originName,
                  fileName: f.fileName,
                  compressedName: f.compressedName,
                  uploadPath: f.uploadPath,
                  fileId: f.fileId
                };
                this.showFile(fileEntity);
              });
            }
          }
        });
      },
      /**
       * 上传文件
       */
      filesUpload(event, file, fileList) {
        if (file.percentage === 0 || file.percentage === 100) {
          //获取限制文件的类型,引用组件时只传递类型即可，如png,jpg
          const fileType = this.fileType
          //如果指定了类型就使用指定的类型，如果没有指定就使用默认的认证类型
          if (fileType != null) {
            //文件类型列表
            const fileTypeArr = fileType.split(",")
            //获取文件的后缀名
            const extName = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
            let isSuccessFile = false
            for (let item of fileTypeArr) {
              if (item == extName) {
                isSuccessFile = true
                break
              }
            }
            if (!isSuccessFile) {
              this.$message.warning("只允许上传 " + fileType + " 类型的文件");
              return;
            }
          } else if (!this.isPicOrPdf(file.name) && !this.isDocFile(file.name) && !this.isCompressedFile(file.name)) {
            this.$message.warning("只允许上传图片、PDF、DOC文件或压缩文件");
            return;
          }
          if (file.raw.size / 1024 / 1024 > 20) {
            this.$message.error("文件大小不能超过20MB!");
            return;
          }
          const data = new FormData();
          data.append("file", file.raw);
          nfsFileApi.uploadFile(data).then(response => {
            console.log(response)
            if (response.success) {
              if (response.data) {
                const fileEntity = {
                  originName: response.data.originName,
                  fileName: response.data.fileName,
                  compressedName: response.data.compressedName,
                  uploadPath: response.data.uploadPath,
                  fileId: 0,
                  businessType: this.businessType,
                  subType: this.subType
                };
                console.log(fileEntity)
                this.showFile(fileEntity);
              }
            }
          });
        }
      },
      /**
       *删除图片
       */
      fileRemove(val, fileList) {
        if (val.fileId !== null && val.fileId !== 0) {
          this.$confirm('此操作将删除图片, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            nfsFileApi.deleteFile(val.fileId).then(response => {
              if (response.success) {
                this.files = fileList;
                for (var i = 0; i < this.fileList.length; i++) {
                  var obj = this.fileList[i];
                  if (obj.fileId != null && obj.fileId !== 0 && obj.fileId === val.fileId) {
                    this.fileList.splice(i, 1);
                  }
                }
              } else {
                this.$message.error('删除附件失败');
              }
            }).catch(() => {
              return false;
            });
          })
        } else {
          this.files = fileList;
          this.fileList.splice(this.fileList.indexOf(val), 1);
        }
      },
      /**
       * 上传后回显文件
       * @param fileEntity
       */
      showFile(fileEntity) {
        nfsFileApi.showFile(fileEntity).then(response => {
          const fileObj = {
            url: "data:image/png;base64," + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), "")),
            fileName: fileEntity.fileName,
            originName: fileEntity.originName,
            compressedName: fileEntity.compressedName,
            uploadPath: fileEntity.uploadPath,
            businessType: this.businessType,
            subType: this.subType,
            fileId: fileEntity.fileId
          };
          const tempFile = this.files;
          var hasShow = false;
          tempFile.forEach(obj => {
            if (obj.businessType === fileObj.businessType && obj.subType === fileObj.subType && obj.originName === fileObj.originName) {
              hasShow = true;
              return;
            }
          });
          if (!hasShow) {
            this.files.push(fileObj);
          }

          const tempObj = this.fileList;
          var has = false;
          tempObj.forEach(obj => {
            if (obj.businessType === fileObj.businessType && obj.subType === fileObj.subType && obj.originName === fileObj.originName) {
              has = true;
              return;
            }
          });
          if (!has) {
            this.fileList.push(fileObj);
            // console.log(this.fileList)
          }
        });
      },
      /**
       * 确定
       */
      handleSubmit() {
        this.dialogVisible = false;
        const param = { 'qualityReportList': this.fileList, 'id': this.keyId };
        this.update(param)
      },

      // 修改的表单提交
      update(param) {
        tcode.update(param).then((response) => {
          console.log(response)
          if (response.success == true) {
            this.dialogFormVisible = false
            this.$message.success('恭喜你，上传成功')
          } else {
            this.$message.error('抱歉，上传失败')
            this.dialogFormVisible = false
          }
        }).catch(error => {
          this.$message.error('抱歉，上传失败')
          this.dialogFormVisible = false
          console.log(error)
        })

      },
      handleCancel() {
        this.fileList = [];
        this.dialogVisible = false;
      },
      handleSuccess() { },
      beforeUpload(file) { },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.file = file;
        this.dialogVisibleMax = true;
      },
      filePreview(file) {
        nfsFileApi.downloadFile(file).then(response => {
          fileDownload(response.data, file.originName);
        }).catch(error => {
          console.log(error)
        });
      },
      handleExceed(files, fileList) {
        const limit = this.$refs['el-upload-button'].limit
        if (limit != null && limit > 0) {
          this.$message.warning('抱歉，最大上传文件数是： ' + limit + ' ，您已超限制')
        } else {
          this.$message.warning(`文件数超过限制了`);
        }
      },
      closeDialog() {
        //this.$emit('update:businessObject', this.fileList);
      },
      

    }
  }
</script>

<style scoped>

</style>

注意：在点击确定按钮的时候，就将图片的信息保存到t_attach表中。

三、后台代码

controller

@PostMapping("/edit")
    public Result editPrepare(@RequestBody CjOutput cjOutput) {
        return jcIntoService.editCjOutput(cjOutput);
    }

service接口

public interface JcIntoService {
    Result editCjOutput(CjOutput cjOutput);
}

service实现类

@Service
public class JcIntoServiceImpl implements JcIntoService {
    @Autowired
    private AttachFileService attachFileService;

    @Transactional
    public Result editCjOutput(CjOutput cjOutput) {
        //插入实物图片信息 专门为web上传实物图片的代码
        attachFileService.saveAttachFileList(cjOutput.getQualityReportList(), cjOutput.getId().intValue());
        return Result.operating("质检报告上传成功", true, ResultCode.SUCCESS);
    }

}

实体类添加

@Transient
    private List<AttachFile> qualityReportList;