vue附件上传和展示

先从后台拿到需要的数据，包括上传附件的数据以及文本数据

<resultMap id="result" type="cn.itsource.domain.FileKeyin">
     <id column="id" property="id"></id>
     <result column="fileid" property="fileid"></result>
     <result column="filetitle" property="filetitle"></result>
     <result column="filetype_id" property="fiiletype"></result>
     <result column="filesave_id" property="filesave"></result>
     <collection property="uploade" ofType="cn.itsource.domain.FileUploadE"
                 select="selectupload" column="id">
         <result column="url" property="url"></result>
         <result column="name" property="name"></result>
     </collection>
 </resultMap>




 <select id="selectupload" resultType="cn.itsource.domain.FileUploadE">
     select u.id,u.url,u.name from fileupload u left join key_upload ku on u.id=ku.upload_id
     left join filekeyin k on ku.key_id=k.id where k.id=#{id}
 </select>
 <select id="searchByKeyin" resultMap="result">
     select * from filekeyin
 </select>

jsp

<el-table-column
        align="center"
        label="附件列表"
        width="200px">
    <template slot-scope="scope">
        <el-upload
                class="upload-demo"
        <%--action="https://jsonplaceholder.typicode.com/posts/"--%>
                action="/fileupload/upload"
                ref="upload"
                :data="{uploaddate}"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="5"
                :on-exceed="handleExceed"
                :file-list="fileList.rows[scope.$index].uploade">
            <el-button size="small" type="primary" @click="runupload(scope.$index, scope.row)">点击上传
            </el-button>
            <%--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>--%>
        </el-upload>
    </template>
</el-table-column>

load() {
    axios.get("/fileupload/page").then((res) => {
        this.fileList=res.data;
        this.fileupload = res.data.rows;
        this.total=res.data.total
       /* this.fileList.push(res.data.rows[0].uploade[0]);*/
       /* this.fileList=res.data.rows[1].uploade;*/

        })
}

controller

@RequestMapping("/upload")
@ResponseBody
public void getUpload(@RequestParam MultipartFile file, @RequestParam String uploaddate, HttpServletRequest req) throws IOException {
    System.err.println(file.getSize() + "===" + uploaddate + file.getContentType());
    System.err.println(file.getContentType().substring(file.getContentType().lastIndexOf("/") + 1));
    System.out.println(file.getOriginalFilename());
    FileUpload upload = new FileUpload();
    //文件大小mb
    double size = file.getSize() / 1024;
    //文件类型
    String type = file.getContentType().substring(file.getContentType().lastIndexOf("/") + 1);
    //文件名字
    String filename = file.getOriginalFilename();
    String exName = FilenameUtils.getExtension(filename);
    String uuid = UUID.randomUUID().toString();
  /*  String newName = uuid + "." + exName;*/
    String newName=file.getOriginalFilename();
    String realPath = req.getServletContext().getRealPath("/upload/file");

    File file2 = new File(realPath, newName);
    File parenFile = file2.getParentFile();
    if (!parenFile.exists()) {
        parenFile.mkdirs();
    }
    file.transferTo(file2);
    upload.setUrl("/upload/file" + newName);
    upload.setFilesize(size);
    upload.setType(type);
    upload.setFileid(Long.parseLong(uploaddate));
    upload.setName(newName);

    service.save(upload);
    Long uploadId = upload.getId();
    key_upload ku = new key_upload();
    ku.setKey_id(Long.parseLong(uploaddate));
    ku.setUpload_id(uploadId);
    service.saveKU(ku);
    System.out.println("success");
}