ionic3 + springmvc/springboot + angular图片上传以及渲染

简介: ionic3 + springmvc/springboot + angular图片上传以及渲染

服务器端上传图片和查询图片的代码


@Controller
@RequestMapping({"/attachment"})
@CrossOrigin // 允许跨域访问
@PropertySource("classpath:file.properties")
public class AttchmentController extends BaseController {
//    @Value("${file.server}")
    private String serverUri = "172.19.1.225:8001";
    /**
     * 通过 RestTemplate 调用远程文件上传服务
     *
     * @param file
     * @return
     */
//    @ApiOperation(httpMethod = "POST", value = "文件上传", response = JsonResult.class)
    @RequestMapping(value = "/uploadFiles", method = RequestMethod.POST)
    @ResponseBody
    public void uploadFilesTemp(MultipartFile file,HttpServletRequest request, final HttpServletResponse response) {
        final Json j = new Json();
        String fileName = StringUtils.cleanPath(file.getOriginalFilename()) + ".jpg";
        if (file.isEmpty()) {
            j.setSuccess(false);
            j.setMsg("无法保存空文件!");
        }
        if (fileName.contains("..")) {
            // 安全检查
            j.setSuccess(false);
            j.setMsg("无法存储当前目录外的相对路径的文件" + fileName);
        }
        //生成临时文件,将 MultipartFile 转成 File
        File tempFile = null;
        // 用uuid作为文件名,防止生成的临时文件重复
        String prefix = UUID.randomUUID().toString().replaceAll("-", "");
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        try {
            tempFile = File.createTempFile(prefix, suffix);
            file.transferTo(tempFile);
            //构建 HttpEntity
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.MULTIPART_FORM_DATA);
            MultiValueMap<String, Object> body = new LinkedMultiValueMap<>();
            body.add("file", new FileSystemResource(tempFile));
            HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(body, headers);
            //文件上传远程接口
            String serverUrl = "http://" + serverUri + "/handleFileUpload";
            RestTemplate restTemplate = new RestTemplate();
            restTemplate.postForEntity(serverUrl, requestEntity, String.class);
            Map<String, Object> resultMap = new HashMap<>(3);
            String tempFileName = tempFile.getName();
            resultMap.put("originalFileName", fileName);
            //加载图片的地址
            String loadFileUrl =  "/attachment/files/"+tempFileName;
            resultMap.put("fileName", loadFileUrl);
            resultMap.put("size", file.getSize());
            //resultMap:{originalFileName=image%3A560647.jpg, size=2612721, fileName=/attachment/files/1ee588f26f2d4bd6af7bc4a63978be65924011332072368680.jpg}
            j.setSuccess(true);
            j.setMsg("上传成功!");
            j.setObj(resultMap);
        } catch (IOException e) {
            e.printStackTrace();
            j.setSuccess(false);
            j.setMsg(e.getMessage());
        } finally {
            if (tempFile != null) {
                tempFile.delete();
            }
        }
        this.writeJson(j, request, response);
    }
    /**
     * 查询文件
     *
     * @param filename
     * @return
     */
    @RequestMapping("/files/{filename:.+}")
    public ResponseEntity<Resource> serveFile(@PathVariable String filename) {
        RestTemplate restTemplate = new RestTemplate();
        String fileUrl = "http://" + serverUri + "/files/" + filename;
        ResponseEntity<Resource> entity = restTemplate.getForEntity(fileUrl, Resource.class);
        return entity;
    }
}



ionic3 端上传和请求图片的代码


先引入


1.在需要使用外部url链接的ts文件中,引入DomSanitizer类

import { DomSanitizer } from '@angular/platform-browser';
constructor(public navCtrl: NavController, public storage: StorageProvider, public navParams: NavParams, public http: HttpProvider,
              public apiService: ApiServiceProvider, private sanitizer: DomSanitizer) {
  }


//2.在需要使用转换后的url地方加上
  getSafeUrl(url){
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }


//声明变量
 url;


上传代码

export class FileDataPage {
fileDataNum:number = 0;
path:any = [];
data: string = "";
fileTransfer: FileTransferObject = this.transfer.create();
constructor(public navCtrl: NavController, public navParams: NavParams,private viewCtrl:ViewController,
            private transfer: FileTransfer,private camera: Camera,private apiService:ApiServiceProvider) {
}
uploadFiles: this.http.domain + '/attachment/uploadFiles.do', //上传附件
doUpload(filePath) {
  const fileTransfer: FileTransferObject = this.transfer.create();
  let options: FileUploadOptions = {
    fileKey: 'file',
    fileName:this.path,
    params: {
      maxSize: 5000000,
      modularName: 'CNL',
      allowType: 'jpg;png',
    },
    headers: {}
  };
  let api = this.apiService.url.uploadFiles; //上传接口地址
  fileTransfer.upload(filePath,api,options).then(
    (data) => {
      alert(data);
    },(err) => {
      console.error(err);
      alert(JSON.stringify(err));
    }
  )
}


ionic3 显示图片


ionViewDidLoad() {
    //修复轮播手动滑动后不能自动轮播问题
    this.slides.autoplayDisableOnInteraction = false;
    this.loadMenu();
    this.loadImage();
  }
  loadImage(){
    let path = '/attachment/files/9d82255765144419997bd0f0296a2499916200506861957264.jpg';
    this.http.get(this.http.domain + path, {},{
      responseType: "blob"
    }).subscribe(res => {
      console.log(res);
      var blob = new Blob([res], {type: "image/jpeg"});
      //this.url = window.URL.createObjectURL(blob);
      this.url = this.getSafeUrl(URL.createObjectURL(blob));
      console.log(this.url);
    });
  }


页面图片


<img [src]="url" alt="">图片


效果

1dc618a0ed9580ce8bfa6facb208c08f.png

相关文章
|
28天前
|
前端开发 JavaScript Java
如何使用 Spring Boot 和 Angular 开发全栈应用程序:全面指南
如何使用 Spring Boot 和 Angular 开发全栈应用程序:全面指南
39 1
|
2月前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
62 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
4月前
|
SQL 前端开发 NoSQL
SpringBoot+Vue 实现图片验证码功能需求
这篇文章介绍了如何在SpringBoot+Vue项目中实现图片验证码功能,包括后端生成与校验验证码的方法以及前端展示验证码的实现步骤。
SpringBoot+Vue 实现图片验证码功能需求
|
4月前
|
前端开发 Java Spring
SpringMVC种通过追踪源码查看是哪种类型的视图渲染器(一般流程方法)
这篇文章通过示例代码展示了如何在Spring MVC中编写和注册拦截器,以及如何在拦截器的不同阶段添加业务逻辑。
SpringMVC种通过追踪源码查看是哪种类型的视图渲染器(一般流程方法)
|
4月前
|
机器学习/深度学习 文字识别 前端开发
基于 Spring Boot 3.3 + OCR 实现图片转文字功能
【8月更文挑战第30天】在当今数字化信息时代,图像中的文字信息越来越重要。无论是文档扫描、名片识别,还是车辆牌照识别,OCR(Optical Character Recognition,光学字符识别)技术都发挥着关键作用。本文将围绕如何使用Spring Boot 3.3结合OCR技术,实现图片转文字的功能,分享工作学习中的技术干货。
251 2
|
4月前
|
Java Spring
Spring boot +Thymeleaf 本地图片加载失败(图片路径)的问题及解决方法
这篇文章详细讲解了在Spring Boot应用程序中本地图片无法加载的问题原因,并提供了两个示例来说明如何通过使用正确的相对路径或Thymeleaf语法来解决图片路径问题。
|
4月前
|
JavaScript UED 前端开发
JSF 富文本编辑器横空出世,如魔法神器开启震撼富文本输入之旅!
【8月更文挑战第31天】在现代Web应用中,用户常需输入带样式、颜色及图片等功能的富文本。为此,JSF可集成如CKEditor等富文本编辑器,提供强大输入体验。首先选择合适编辑器并下载引入库文件,使用`&lt;textarea&gt;`与JavaScript实例化编辑器。后台通过`value`属性获取内容。此外,还需配置编辑器选项、处理特殊字符和进行充分测试以确保稳定性和安全性,提升用户体验。
46 0
|
4月前
|
前端开发 安全 开发者
JSF文件上传,让Web应用如虎添翼!一招实现文件上传,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,文件上传是重要功能之一。JSF(JavaServer Faces)框架提供了强大的文件上传支持,简化了开发流程。本文将介绍JSF文件上传的基本步骤:创建前端表单、处理上传文件的后端Action类、将文件保存到服务器指定目录以及返回结果页面。通过示例代码,我们将展示如何利用JSF实现文件上传功能,包括使用`h:inputFile`控件和`ManagedBean`处理上传逻辑。此外,JSF文件上传还具备类型安全、解耦合和灵活性等优点,有助于提升程序的健壮性和可维护性。
45 0
|
4月前
|
UED
JSF文件下载:解锁终极文件传输秘籍,让你的Web应用瞬间高大上!
【8月更文挑战第31天】掌握JSF文件下载功能对构建全面的Web应用至关重要。本文通过具体代码示例,详细介绍如何在JSF中实现文件下载。关键在于后端Bean中的文件读取与响应设置。示例展示了从创建实体类到使用`&lt;h:commandLink&gt;`触发下载的全过程,并通过正确设置响应头和处理文件流,确保文件能被顺利下载。这将显著提升Web应用的实用性与用户体验。
77 0
|
4月前
|
Java 数据库 API
JSF与JPA的史诗级联盟:如何编织数据持久化的华丽织锦,重塑Web应用的荣耀
【8月更文挑战第31天】JavaServer Faces (JSF) 和 Java Persistence API (JPA) 分别是构建Java Web应用的用户界面组件框架和持久化标准。结合使用JSF与JPA,能够打造强大的数据驱动Web应用。首先,通过定义实体类(如`User`)和配置`persistence.xml`来设置JPA环境。然后,在JSF中利用Managed Bean(如`UserBean`)管理业务逻辑,通过`EntityManager`执行数据持久化操作。
63 0