• nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分（三）

          因为这个版本的若依plus不支持本地文件上传，所以需要增加这些本地上传文件的后端代码

    和前端代码修改。

      1、后端部分

      先配置跳过测试吧，平时编译也不需要这个

    2. 			
    3. 				org.apache.maven.plugins
    4. 				maven-surefire-plugin
    5. 				2.22.2
    6. 				
    7. 					true
    8. 				
    9. 			
    10.

    增加一个公共上传接口

    1. package com.ruoyi.web.controller.common;
    2.  
    3. import java.util.ArrayList;
    4. import java.util.List;
    5. import java.util.Map;
    6. import java.util.HashMap;
    7.  
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import org.slf4j.Logger;
    11. import org.slf4j.LoggerFactory;
    12. import org.springframework.beans.factory.annotation.Autowired;
    13. import org.springframework.http.MediaType;
    14. import org.springframework.web.bind.annotation.GetMapping;
    15. import org.springframework.web.bind.annotation.PostMapping;
    16. import org.springframework.web.bind.annotation.RequestMapping;
    17. import org.springframework.web.bind.annotation.ResponseBody;
    18. import org.springframework.web.bind.annotation.RestController;
    19. import org.springframework.web.multipart.MultipartFile;
    20. import com.ruoyi.common.config.RuoYiConfig;
    21. import com.ruoyi.common.constant.Constants;
    22. import com.ruoyi.common.core.domain.R;
    23. import com.ruoyi.common.utils.StringUtils;
    24. import com.ruoyi.common.utils.file.FileUploadUtils;
    25. import com.ruoyi.common.utils.file.FileUtils;
    26. import com.ruoyi.framework.config.ServerConfig;
    27.  
    28. /**
    29.  * 通用请求处理
    30.  * 
    31.  * @author ruoyi
    32.  */
    33. @RestController
    34. @RequestMapping("/common")
    35. public class CommonController
    36. {
    37.     private static final Logger log = LoggerFactory.getLogger(CommonController.class);
    38.  
    39.     @Autowired
    40.     private ServerConfig serverConfig;
    41.  
    42.     private static final String FILE_DELIMETER = ",";
    43.  
    44.     /**
    45.      * 通用下载请求
    46.      * 
    47.      * @param fileName 文件名称
    48.      * @param delete 是否删除
    49.      */
    50.     @GetMapping("/download")
    51.     public void fileDownload(String fileName, Boolean delete, HttpServletResponse response, HttpServletRequest request)
    52.     {
    53.         try
    54.         {
    55.             if (!FileUtils.checkAllowDownload(fileName))
    56.             {
    57.                 throw new Exception(StringUtils.format("文件名称({})非法，不允许下载。 ", fileName));
    58.             }
    59.             String realFileName = System.currentTimeMillis() + fileName.substring(fileName.indexOf("_") + 1);
    60.             String filePath = RuoYiConfig.getDownloadPath() + fileName;
    61.  
    62.             response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
    63.             FileUtils.setAttachmentResponseHeader(response, realFileName);
    64.             FileUtils.writeBytes(filePath, response.getOutputStream());
    65.             if (delete)
    66.             {
    67.                 FileUtils.deleteFile(filePath);
    68.             }
    69.         }
    70.         catch (Exception e)
    71.         {
    72.             log.error("下载文件失败", e);
    73.         }
    74.     }
    75.  
    76.     /**
    77.      * 通用上传请求（单个）
    78.      */
    79.     @PostMapping("/upload")
    80.     @ResponseBody
    81.     public R> uploadFile(MultipartFile file) throws Exception
    82.     {
    83.         try
    84.         {
    85.             // 上传文件路径
    86.             String filePath = RuoYiConfig.getUploadPath();
    87.             // 上传并返回新文件名称
    88.             String fileName = FileUploadUtils.upload(filePath, file);
    89.             String url = serverConfig.getUrl() + fileName;
    90.             Map map = new HashMap<>(2);
    91.             map.put("url", url);
    92.             map.put("fileName", fileName);
    93.             map.put("newFileName", FileUtils.getName(fileName));
    94.             map.put("originalFilename", file.getOriginalFilename());
    95.             return R.ok(map);
    96.         }
    97.         catch (Exception e)
    98.         {
    99.             return R.fail(e.getMessage());
    100.         }
    101.     }
    102.  
    103.     /**
    104.      * 通用上传请求（多个）
    105.      */
    106.     @PostMapping("/uploads")
    107.     @ResponseBody
    108.     public R>  uploadFiles(List files) throws Exception
    109.     {
    110.         try
    111.         {
    112.             // 上传文件路径
    113.             String filePath = RuoYiConfig.getUploadPath();
    114.             List urls = new ArrayList();
    115.             List fileNames = new ArrayList();
    116.             List newFileNames = new ArrayList();
    117.             List originalFilenames = new ArrayList();
    118.             for (MultipartFile file : files)
    119.             {
    120.                 // 上传并返回新文件名称
    121.                 String fileName = FileUploadUtils.upload(filePath, file);
    122.                 String url = serverConfig.getUrl() + fileName;
    123.                 urls.add(url);
    124.                 fileNames.add(fileName);
    125.                 newFileNames.add(FileUtils.getName(fileName));
    126.                 originalFilenames.add(file.getOriginalFilename());
    127.             }
    128.             Map map = new HashMap<>(2);
    129.             map.put("urls", StringUtils.join(urls, FILE_DELIMETER));
    130.             map.put("fileNames", StringUtils.join(fileNames, FILE_DELIMETER));
    131.             map.put("newFileNames", StringUtils.join(newFileNames, FILE_DELIMETER));
    132.             map.put("originalFilenames", StringUtils.join(originalFilenames, FILE_DELIMETER));
    133.             return R.ok(map);
    134.         }
    135.         catch (Exception e)
    136.         {
    137.             return R.fail(e.getMessage());
    138.         }
    139.     }
    140.  
    141.     /**
    142.      * 本地资源通用下载
    143.      */
    144.     @GetMapping("/download/resource")
    145.     public void resourceDownload(String resource, HttpServletRequest request, HttpServletResponse response)
    146.             throws Exception
    147.     {
    148.         try
    149.         {
    150.             if (!FileUtils.checkAllowDownload(resource))
    151.             {
    152.                 throw new Exception(StringUtils.format("资源文件({})非法，不允许下载。 ", resource));
    153.             }
    154.             // 本地资源路径
    155.             String localPath = RuoYiConfig.getProfile();
    156.             // 数据库资源地址
    157.             String downloadPath = localPath + StringUtils.substringAfter(resource, Constants.RESOURCE_PREFIX);
    158.             // 下载名称
    159.             String downloadName = StringUtils.substringAfterLast(downloadPath, "/");
    160.             response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
    161.             FileUtils.setAttachmentResponseHeader(response, downloadName);
    162.             FileUtils.writeBytes(downloadPath, response.getOutputStream());
    163.         }
    164.         catch (Exception e)
    165.         {
    166.             log.error("下载文件失败", e);
    167.         }
    168.     }
    169. }

    增加上传的全局参数

    1.   # 本地：local\Minio：minio\阿里云：alioss
    2.   uploadtype: local
    3.   #文件上传根目录 设置
    4.   profile: /home/nbcio

    增加文件工具类

    1. package com.ruoyi.common.utils.file;
    2.  
    3. import java.io.File;
    4. import java.io.FileInputStream;
    5. import java.io.FileNotFoundException;
    6. import java.io.FileOutputStream;
    7. import java.io.IOException;
    8. import java.io.OutputStream;
    9. import java.io.UnsupportedEncodingException;
    10. import java.net.URLEncoder;
    11. import java.nio.charset.StandardCharsets;
    12. import javax.servlet.http.HttpServletRequest;
    13. import javax.servlet.http.HttpServletResponse;
    14. import org.apache.commons.io.IOUtils;
    15. import org.apache.commons.lang3.ArrayUtils;
    16. import com.ruoyi.common.config.RuoYiConfig;
    17. import com.ruoyi.common.utils.DateUtils;
    18. import com.ruoyi.common.utils.StringUtils;
    19. import com.ruoyi.common.utils.uuid.IdUtils;
    20. import org.apache.commons.io.FilenameUtils;
    21.  
    22. /**
    23.  * 文件处理工具类
    24.  * 
    25.  * @author ruoyi
    26.  */
    27. public class FileUtils
    28. {
    29.     public static String FILENAME_PATTERN = "[a-zA-Z0-9_\\-\\|\\.\\u4e00-\\u9fa5]+";
    30.  
    31.     /**
    32.      * 输出指定文件的byte数组
    33.      * 
    34.      * @param filePath 文件路径
    35.      * @param os 输出流
    36.      * @return
    37.      */
    38.     public static void writeBytes(String filePath, OutputStream os) throws IOException
    39.     {
    40.         FileInputStream fis = null;
    41.         try
    42.         {
    43.             File file = new File(filePath);
    44.             if (!file.exists())
    45.             {
    46.                 throw new FileNotFoundException(filePath);
    47.             }
    48.             fis = new FileInputStream(file);
    49.             byte[] b = new byte[1024];
    50.             int length;
    51.             while ((length = fis.read(b)) > 0)
    52.             {
    53.                 os.write(b, 0, length);
    54.             }
    55.         }
    56.         catch (IOException e)
    57.         {
    58.             throw e;
    59.         }
    60.         finally
    61.         {
    62.             IOUtils.close(os);
    63.             IOUtils.close(fis);
    64.         }
    65.     }
    66.  
    67.     /**
    68.      * 写数据到文件中
    69.      *
    70.      * @param data 数据
    71.      * @return 目标文件
    72.      * @throws IOException IO异常
    73.      */
    74.     public static String writeImportBytes(byte[] data) throws IOException
    75.     {
    76.         return writeBytes(data, RuoYiConfig.getImportPath());
    77.     }
    78.  
    79.     /**
    80.      * 写数据到文件中
    81.      *
    82.      * @param data 数据
    83.      * @param uploadDir 目标文件
    84.      * @return 目标文件
    85.      * @throws IOException IO异常
    86.      */
    87.     public static String writeBytes(byte[] data, String uploadDir) throws IOException
    88.     {
    89.         FileOutputStream fos = null;
    90.         String pathName = "";
    91.         try
    92.         {
    93.             String extension = getFileExtendName(data);
    94.             pathName = DateUtils.datePath() + "/" + IdUtils.fastUUID() + "." + extension;
    95.             File file = FileUploadUtils.getAbsoluteFile(uploadDir, pathName);
    96.             fos = new FileOutputStream(file);
    97.             fos.write(data);
    98.         }
    99.         finally
    100.         {
    101.             IOUtils.close(fos);
    102.         }
    103.         return FileUploadUtils.getPathFileName(uploadDir, pathName);
    104.     }
    105.  
    106.     /**
    107.      * 删除文件
    108.      * 
    109.      * @param filePath 文件
    110.      * @return
    111.      */
    112.     public static boolean deleteFile(String filePath)
    113.     {
    114.         boolean flag = false;
    115.         File file = new File(filePath);
    116.         // 路径为文件且不为空则进行删除
    117.         if (file.isFile() && file.exists())
    118.         {
    119.             flag = file.delete();
    120.         }
    121.         return flag;
    122.     }
    123.  
    124.     /**
    125.      * 文件名称验证
    126.      * 
    127.      * @param filename 文件名称
    128.      * @return true 正常 false 非法
    129.      */
    130.     public static boolean isValidFilename(String filename)
    131.     {
    132.         return filename.matches(FILENAME_PATTERN);
    133.     }
    134.  
    135.     /**
    136.      * 检查文件是否可下载
    137.      * 
    138.      * @param resource 需要下载的文件
    139.      * @return true 正常 false 非法
    140.      */
    141.     public static boolean checkAllowDownload(String resource)
    142.     {
    143.         // 禁止目录上跳级别
    144.         if (StringUtils.contains(resource, ".."))
    145.         {
    146.             return false;
    147.         }
    148.  
    149.         // 检查允许下载的文件规则
    150.         if (ArrayUtils.contains(MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION, FileTypeUtils.getFileType(resource)))
    151.         {
    152.             return true;
    153.         }
    154.  
    155.         // 不在允许下载的文件规则
    156.         return false;
    157.     }
    158.  
    159.     /**
    160.      * 下载文件名重新编码
    161.      * 
    162.      * @param request 请求对象
    163.      * @param fileName 文件名
    164.      * @return 编码后的文件名
    165.      */
    166.     public static String setFileDownloadHeader(HttpServletRequest request, String fileName) throws UnsupportedEncodingException
    167.     {
    168.         final String agent = request.getHeader("USER-AGENT");
    169.         String filename = fileName;
    170.         if (agent.contains("MSIE"))
    171.         {
    172.             // IE浏览器
    173.             filename = URLEncoder.encode(filename, "utf-8");
    174.             filename = filename.replace("+", " ");
    175.         }
    176.         else if (agent.contains("Firefox"))
    177.         {
    178.             // 火狐浏览器
    179.             filename = new String(fileName.getBytes(), "ISO8859-1");
    180.         }
    181.         else if (agent.contains("Chrome"))
    182.         {
    183.             // google浏览器
    184.             filename = URLEncoder.encode(filename, "utf-8");
    185.         }
    186.         else
    187.         {
    188.             // 其它浏览器
    189.             filename = URLEncoder.encode(filename, "utf-8");
    190.         }
    191.         return filename;
    192.     }
    193.  
    194.     /**
    195.      * 下载文件名重新编码
    196.      *
    197.      * @param response 响应对象
    198.      * @param realFileName 真实文件名
    199.      */
    200.     public static void setAttachmentResponseHeader(HttpServletResponse response, String realFileName) throws UnsupportedEncodingException
    201.     {
    202.         String percentEncodedFileName = percentEncode(realFileName);
    203.  
    204.         StringBuilder contentDispositionValue = new StringBuilder();
    205.         contentDispositionValue.append("attachment; filename=")
    206.                 .append(percentEncodedFileName)
    207.                 .append(";")
    208.                 .append("filename*=")
    209.                 .append("utf-8''")
    210.                 .append(percentEncodedFileName);
    211.  
    212.         response.addHeader("Access-Control-Expose-Headers", "Content-Disposition,download-filename");
    213.         response.setHeader("Content-disposition", contentDispositionValue.toString());
    214.         response.setHeader("download-filename", percentEncodedFileName);
    215.     }
    216.  
    217.     /**
    218.      * 百分号编码工具方法
    219.      *
    220.      * @param s 需要百分号编码的字符串
    221.      * @return 百分号编码后的字符串
    222.      */
    223.     public static String percentEncode(String s) throws UnsupportedEncodingException
    224.     {
    225.         String encode = URLEncoder.encode(s, StandardCharsets.UTF_8.toString());
    226.         return encode.replaceAll("\\+", "%20");
    227.     }
    228.  
    229.     /**
    230.      * 获取图像后缀
    231.      * 
    232.      * @param photoByte 图像数据
    233.      * @return 后缀名
    234.      */
    235.     public static String getFileExtendName(byte[] photoByte)
    236.     {
    237.         String strFileExtendName = "jpg";
    238.         if ((photoByte[0] == 71) && (photoByte[1] == 73) && (photoByte[2] == 70) && (photoByte[3] == 56)
    239.                 && ((photoByte[4] == 55) || (photoByte[4] == 57)) && (photoByte[5] == 97))
    240.         {
    241.             strFileExtendName = "gif";
    242.         }
    243.         else if ((photoByte[6] == 74) && (photoByte[7] == 70) && (photoByte[8] == 73) && (photoByte[9] == 70))
    244.         {
    245.             strFileExtendName = "jpg";
    246.         }
    247.         else if ((photoByte[0] == 66) && (photoByte[1] == 77))
    248.         {
    249.             strFileExtendName = "bmp";
    250.         }
    251.         else if ((photoByte[1] == 80) && (photoByte[2] == 78) && (photoByte[3] == 71))
    252.         {
    253.             strFileExtendName = "png";
    254.         }
    255.         return strFileExtendName;
    256.     }
    257.  
    258.     /**
    259.      * 获取文件名称 /profile/upload/2022/04/16/ruoyi.png -- ruoyi.png
    260.      * 
    261.      * @param fileName 路径名称
    262.      * @return 没有文件路径的名称
    263.      */
    264.     public static String getName(String fileName)
    265.     {
    266.         if (fileName == null)
    267.         {
    268.             return null;
    269.         }
    270.         int lastUnixPos = fileName.lastIndexOf('/');
    271.         int lastWindowsPos = fileName.lastIndexOf('\\');
    272.         int index = Math.max(lastUnixPos, lastWindowsPos);
    273.         return fileName.substring(index + 1);
    274.     }
    275.  
    276.     /**
    277.      * 获取不带后缀文件名称 /profile/upload/2022/04/16/ruoyi.png -- ruoyi
    278.      * 
    279.      * @param fileName 路径名称
    280.      * @return 没有文件路径和后缀的名称
    281.      */
    282.     public static String getNameNotSuffix(String fileName)
    283.     {
    284.         if (fileName == null)
    285.         {
    286.             return null;
    287.         }
    288.         String baseName = FilenameUtils.getBaseName(fileName);
    289.         return baseName;
    290.     }
    291. }

    2、前端方面

    previewRender.js修改如下：

    1. import { isAttr,jsonClone } from '../utils';
    2. import childrenItem from './slot/index';
    3. import {remoteData} from './mixin';
    4. import { getToken } from "@/utils/auth";
    5.  
    6. //先修改在这里,后续需要优化
    7. function vModel(self, dataObject) {
    8.   dataObject.props.value = self.value;
    9.   dataObject.on.input = val => {
    10.     self.$emit('input', val)
    11.   }
    12.   //判断是否为上传组件
    13.   if(self.conf.compType === 'upload'){
    14.     //for token add by nbacheng 2022-09-07
    15.     //dataObject.attrs['headers'] = {"Authorization":"Bearer " + getToken()};
    16.     /**
    17.      * 此处增加自定义的token,如果不能满足要求，可以重写此处代码
    18.      */
    19.     const token = getToken();
    20.     dataObject.attrs['headers'] = {"Authorization":"Bearer " + token};
    21.     console.log("dataObject.props.value",dataObject.props.value)
    22.     if(dataObject.props.value!==undefined && dataObject.props.value !==''){
    23.       const filevalue = JSON.parse(dataObject.props.value);
    24.       dataObject.props['file-list'] = filevalue;
    25.     }
    26.     dataObject.attrs['before-upload'] = file=>{
    27.       //非限定后缀不允许上传
    28.       console.log("before-upload file",file);
    29.       const fileName = file.name;
    30.       console.log("before-upload fileName",fileName);
    31.       const suffixName = fileName.split('.').pop();
    32.  
    33.       if(!self.conf.accept.includes(suffixName)){
    34.         self.$message.error('该后缀文件不允许上传');
    35.         return false;
    36.       }
    37.       const fileSize = file.size;
    38.       if(fileSize>dataObject.props.fileSize*1024*1024){
    39.         self.$message.error('文件大小超出限制，请检查！');
    40.         return false;
    41.       }
    42.     }
    43.  
    44.     //for get return file url add by nbacheng 2022-09-07
    45.     dataObject.attrs['on-success'] = file=>{
    46.  
    47.         console.log("on-success file",file);
    48.         var filename=file.data.fileName.substring(file.data.fileName.lastIndexOf('/')+1)  //获取文件名称
    49.         let fileObj = {name: filename, url: file.data.fileName}
    50.         console.log("dataObject=",dataObject);
    51.         console.log("self.conf=",self.conf);
    52.         let oldValue = [];
    53.         if(dataObject.props.value) {
    54.            oldValue = JSON.parse(dataObject.props.value);
    55.         }else {
    56.           oldValue = [];
    57.         }
    58.         if (oldValue) {
    59.           oldValue.push(fileObj)
    60.         } else {
    61.           oldValue = [fileObj]
    62.         }
    63.         self.$emit('input',JSON.stringify(oldValue));
    64.         console.log("on-success value",oldValue);
    65.     }
    66.     dataObject.attrs['on-remove'] = (file, fileList) => {
    67.       console.log("on-remove file,fileList",file,fileList);
    68.       let oldValue = JSON.parse(dataObject.props.value);
    69.       console.log("on-remove oldValue",oldValue);
    70.       //file 删除的文件
    71.       //过滤掉删除的文件
    72.       let newValue = oldValue.filter(item => item.name !== file.name)
    73.       self.$emit('input',JSON.stringify(newValue));
    74.       console.log("on-remove newValue",newValue);
    75.     }
    76.  
    77.     dataObject.attrs['on-error'] = (file) => {
    78.       console.log("on-error file",file);
    79.     }
    80.  
    81.     dataObject.attrs['on-preview'] = (file) => {
    82.       console.log("on-preview file",file);
    83.       //download(file);
    84.     }
    85.     //for get return file url add by nbacheng 2022-09-07
    86.   }
    87. }
    88.  
    89. export default {
    90.   render(h) {
    91.     let dataObject = {
    92.       attrs: {},
    93.       props: {},
    94.       on: {},
    95.       style: {}
    96.     }
    97.     //远程获取数据
    98.     this.getRemoteData();
    99.     const confClone = jsonClone(this.conf);
    100.     const children = childrenItem(h,confClone);
    101.  
    102.     Object.keys(confClone).forEach(key => {
    103.       const val = confClone[key]
    104.       if (dataObject[key]) {
    105.         dataObject[key] = val
    106.       } else if(key ==='width'){
    107.         dataObject.style= 'width:'+val;
    108.       } else if (!isAttr(key)) {
    109.         dataObject.props[key] = val
    110.       }else {
    111.         if (key == 'classStyle' && val.length > 0){
    112.           let style =""
    113.           val.forEach(item =>{
    114.             console.log(item)
    115.             style+=item +" "
    116.           })
    117.           dataObject.attrs['class'] = style
    118.         }else if (key == 'cssStyle'){
    119.           dataObject.attrs['style'] = val
    120.         }else if(key !== 'value'){
    121.           dataObject.attrs[key] = val
    122.         }
    123.       }
    124.     })
    125.     /*调整赋值模式，规避cascader组件赋值props会出现覆盖预制参数的bug */
    126.     vModel(this, dataObject);
    127.     return h(confClone.ele, dataObject, children)
    128.   },
    129.   props: ['conf','value'],
    130.   mixins:[remoteData]
    131. }

    3、效果图

  • 相关阅读:
    足球资讯查询易语言代码
    《Unix 网络编程》11：名字和地址转换
    自动驾驶的关键在于安全、智能与舒适
    ping与Traceroute是如何工作的
    数据可视化：四种关系图数据可视化的效果对比！
    c++ Primer 第九章：顺序容器 练习答案记录
    华为数通方向HCIP-DataCom H12-821题库(多选题：41-60)
    游戏动画技术简介
    云扩RPA携手中联教育引领财务机器人教学创新
    java计算机毕业设计学生健康信息管理源程序+mysql+系统+lw文档+远程调试
  • 原文地址：https://blog.csdn.net/qq_40032778/article/details/132870859