上传图片折腾了好几天,终于实现了,记录一下。
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;
}
注意:初始使用这个方法的时候,没有“ corsConfiguration.setAllowCredentials(true);”这句配置,出现以下错误