vue 文件上传组件封装

增加图片缩略图以及Word、txt文档在线预览

文件上传组件完整代码

文档在线预览组件完整代码，此处使用 mammoth 作为word文档预览插件

父组件中用法

    finishUploadChange(ids) {
      this.form.layoutFileIds = ids
    },

后端文件上传Java代码

    @ApiOperation("通用上传请求返回文件表id")
    @ApiImplicitParam(name = "file", value = "文件流", dataType = "MultipartFile")
    @PostMapping("/common/uploadGetId")
    public AjaxResult uploadGetId(MultipartFile file) {
        try {
            // 上传文件路径
            String filePath = KingTopConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String realName = file.getOriginalFilename().substring(0, file.getOriginalFilename().indexOf("."));
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("fileName", realName);
            ajax.put("url", url);

            String localFilePath = filePath + fileName.substring(fileName.indexOf("/upload")+7);
            // 存储到文件表
            SysFile sysFile = new SysFile();
            // 这不懂干什么用的，但是是必填，随便填个0
            sysFile.setTableId(0l);
            sysFile.setDataId(0l);
            sysFile.setMark(IdUtils.simpleUUID());
            sysFile.setUserId(SecurityUtils.getUserId());
            sysFile.setUserName(SecurityUtils.getUsername());
            sysFile.setUploadTime(new Date());
            sysFile.setUrl(url);
            sysFile.setFileSize(file.getSize());
            sysFile.setFileName(realName);
            sysFile.setFilePath(localFilePath);
            sysFile.setFileType(url.substring(url.lastIndexOf(".")+1));
            sysFile.setFileMd5(SecureUtil.md5(new File(localFilePath)));
            sysFile.setStatus(0l);
            ajax.put("id", sysFileService.insertSysFile(sysFile));
            return ajax;
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }
    }