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="">图片

效果

---

自此，大功告成！（最喜欢的一句话）