ionic4结合ng2-file-upload实现手机端图片上传

上传图片折腾了好几天，终于实现了，记录一下。

1、安装插件 ng2-file-upload ，cnpm install ng2-file-upload --save

2、在需要使用插件的页面的module.ts文件中加入依赖

注意：如果这一步不加入依赖，会出现下面的错误

3、在相应的ts文件中加入依赖，并声明FileUploader类型的变量

import { FileUploader } from 'ng2-file-upload';

// 声明一个FileUploader类型的变量，并将其初始化
    public uploader: FileUploader = new FileUploader({
      url: this.uploadPictureUrl,
      method: 'POST',
      // autoUpload: true,
      removeAfterUpload: true,
      itemAlias: 'multfile'
      // allowedFileType: ['image']
    });

4、html

<div class="item act-cell-padding" style="height: 160px;">         
            <span>活动文案：</span>
            <div class="picPlace">
              <img id="wizardPicturePreview" name="picture" src="{{picture}}" style="height:100px;  width:100px;display:block; border:1px solid #CCC" alt="" class="picture-src" title="" />
              <input #file type="file" id="file" class="showPicture"  ng2FileSelect  [uploader]="uploader" (change)="selectedFileOnChanged(file)">
            </div>       
        </div>

5、ts文件中加入change事件，上传图片到fastdfs，然后接受fastdfs返回的图片地址

// 选择上传图片
public selectedFileOnChanged(file: HTMLInputElement) {
  let length: number;
  this.editPicture = !this.editPicture;
  this.fileName = file.value;
  const fileDot: string = this.fileName.substring(this.fileName.lastIndexOf('.') + 1, this.fileName.length);

   // 开始上传
   this.uploader.queue[0].upload();

    this.uploader.queue[0].onSuccess = function(response, status, headers) {
    // 上传文件成功
    if (status === 200) {
      // 上传文件后获取服务器返回的数据
      const temRes = JSON.parse(response);
      let data = temRes.data;
      // 修改页面图片
      const el: Element = document.getElementById('wizardPicturePreview');
      el.setAttribute('src', data);

      length = data.length;
      data = data.substring(21, length);
      this.picture = data;
      localStorage.setItem('picUrl', 'http://192.168.22.64/' + data);
    } else {
      alert('上传图片失败');
    }
  };
}

6、后端实现图片上传

/**
     * saveImage-保存图片
     *
     * @Params: file 文件
     * @author 
     * @since 0.0.1 2018-8-6 14:43:57
     */
    @ApiOperation(value = "上传图片")
    @PostMapping(value = {"/upload"})
    public IntegralResult<String> uploadImage(@RequestParam(value="multfile",required=false)MultipartFile file) {

        try {
            String imagePath = medalService.saveImage(file);
            return IntegralResult.build(IntegralResult.SUCCESS, "文件：" + file.getName() + "上传成功", imagePath);
        } catch (IOException e) {
            return IntegralResult.build(IntegralResult.FAIL, "上传失败", e.getMessage());
        }
    }

注意：@RequestParam(value=“multfile”)需要和new FileUploader中的别名itemAlias: 'multfile’一致，否者后端接收到的file始终都是null

7、需要配置全部cose跨域

private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

参考链接：SpringBoot配置Cors解决跨域请求问题

注意：初始使用这个方法的时候，没有“ corsConfiguration.setAllowCredentials(true);”这句配置，出现以下错误