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

相关文章
|
3月前
|
前端开发 Java 微服务
《深入理解Spring》:Spring、Spring MVC与Spring Boot的深度解析
Spring Framework是Java生态的基石,提供IoC、AOP等核心功能;Spring MVC基于其构建,实现Web层MVC架构;Spring Boot则通过自动配置和内嵌服务器,极大简化了开发与部署。三者层层演进,Spring Boot并非替代,而是对前者的高效封装与增强,适用于微服务与快速开发,而深入理解Spring Framework有助于更好驾驭整体技术栈。
|
3月前
|
JavaScript Java Maven
【SpringBoot(二)】带你认识Yaml配置文件类型、SpringMVC的资源访问路径 和 静态资源配置的原理!
SpringBoot专栏第二章,从本章开始正式进入SpringBoot的WEB阶段开发,本章先带你认识yaml配置文件和资源的路径配置原理,以方便在后面的文章中打下基础
368 3
|
10月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
11月前
|
JSON 前端开发 JavaScript
SpringBoot 2.0 多图片上传加回显
本文记录了在SpringBoot 2.0中实现商户注册后台功能时,处理多图片上传及回显的过程。通过使用`MultipartFile[]`接收前端传来的图片文件,并确保前后端参数名一致。展示了Controller、前端HTML和JS代码,以及配置文件中对上传图片大小的设置。还介绍了全局异常处理机制,使用`@ControllerAdvice`注解捕获异常。最后总结了一些常见问题及解决方法。
257 0
SpringBoot 2.0 多图片上传加回显
|
前端开发 JavaScript Java
如何使用 Spring Boot 和 Angular 开发全栈应用程序:全面指南
如何使用 Spring Boot 和 Angular 开发全栈应用程序:全面指南
518 1
|
缓存 前端开发 Java
【Java面试题汇总】Spring,SpringBoot,SpringMVC,Mybatis,JavaWeb篇(2023版)
Soring Boot的起步依赖、启动流程、自动装配、常用的注解、Spring MVC的执行流程、对MVC的理解、RestFull风格、为什么service层要写接口、MyBatis的缓存机制、$和#有什么区别、resultType和resultMap区别、cookie和session的区别是什么?session的工作原理
【Java面试题汇总】Spring,SpringBoot,SpringMVC,Mybatis,JavaWeb篇(2023版)
|
SQL 前端开发 NoSQL
SpringBoot+Vue 实现图片验证码功能需求
这篇文章介绍了如何在SpringBoot+Vue项目中实现图片验证码功能,包括后端生成与校验验证码的方法以及前端展示验证码的实现步骤。
SpringBoot+Vue 实现图片验证码功能需求
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
3632 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
378 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例