ionic3 java服务器(SpringMVC) 文件的上传与下载

安装插件
官网https://ionicframework.com/docs/native/file-transfer/
https://ionicframework.com/docs/native/file/
https://ionicframework.com/docs/native/file-chooser/
https://ionicframework.com/docs/native/file-opener/
 

安装命令

 

1. ▲ionic-native/file-chooser

2. ionic cordova plugin add cordova-plugin-filechooser

3. npm install --save @ionic-native/file-chooser

4.  

5. ▲ionic-native/file-transfer

6. ionic cordova plugin add cordova-plugin-file-transfer

7. npm install --save @ionic-native/file-transfer

8.  

9. ▲ionic-native/file

10. ionic cordova plugin add cordova-plugin-file

11. npm install --save @ionic-native/file

12.  

13. ▲ionic-native/file-opener

14. ionic cordova plugin add cordova-plugin-file-opener2

15. npm install --save @ionic-native/file-opener

*切记所有的插件要在app.Module.ts中的providers引用

ionic编码
▲html

 

1. <ion-content padding>

2. <button ion-button block color="danger" (click)="choose()">

3. 选择文件

4. </button>

5. 文件：<a>{{filePath}}</a>

6. <button ion-button block color="danger" (click)="upload()">

7. 上传文件

8. </button>

9. 进度：<a>{{loadingStatus}}</a>

10.  

11. <button ion-button block color="danger" (click)="download()">

12. 下载文件

13. </button>

14. </ion-content>

▲ts

1. //导入

2. import { Component } from '@angular/core';

3. import { NavController,LoadingController,Loading } from 'ionic-angular';

4. import { FileChooser } from '@ionic-native/file-chooser';

5. import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';

6. import { File } from '@ionic-native/file';

7. import { FileOpener } from '@ionic-native/file-opener';

8. //构造

9. filePath : string;

10. loadingStatus : any;

11. private loading: Loading;

12. constructor(public navCtrl: NavController,

13. private loadingCtrl: LoadingController,

14. private fileChooser: FileChooser,

15. private fileTransfer:FileTransfer,

16. private file :File,

17. private fileOpener: FileOpener) {

18. this.filePath="";

19. }

20.  

21. // 选择文件

22. choose(){

23. this.fileChooser.open()

24. .then(uri => {

25. console.log(uri);

26. this.filePath=uri;

27. alert(this.filePath);

28. })

29. .catch(e => console.log(e));

30. }

31.  

32. // 上传文件

33. upload(){

34. if(this.filePath==""){

35. alert("请选择文件");

36. return;

37. }

38. const transfer: FileTransferObject = this.fileTransfer.create();

39.  

40. // 文件类型

41. let fileType=this.getFileType(this.filePath);

42. // 文件名

43. let fileName=this.getFileName(this.filePath);

44. let fileMimeType=this.getFileMimeType(fileType);

45. // FileUploadOptions

46. let options: FileUploadOptions = {

47. fileKey: 'file',

48. fileName: fileName,

49. mimeType: fileMimeType,

50. headers: {}

51. }

52.  

53. let loading = this.loadingCtrl.create({

54. spinner: 'hide',

55. content: '...'

56. });

57.  

58. // 服务器URL

59. var serverUrl='http://xxxxxxxxx/upload.do';

60.  

61. // 上传进度

62. transfer.onProgress(ProgressEvent=>{

63. if (ProgressEvent.lengthComputable) {

64. console.log(ProgressEvent.loaded / ProgressEvent.total);

65. this.loadingStatus=Number(Math.round((ProgressEvent.loaded / ProgressEvent.total)*100)).toFixed(2).toString() + "%";

66. if(!this.loading){//如果loading已经存在则不再打开

67. let loading = this.loadingCtrl.create({

68. content: this.loadingStatus

69. });

70. loading.present();

71. this.loading = loading;

72. setTimeout(() => {//延迟200毫秒可以避免嵌套请求loading重复打开和关闭

73. this.loading && this.loading.dismiss();

74. this.loading = null;

75. }, 50);

76. }

77. if (ProgressEvent.loaded > 99){

78. this.loading.dismiss();

79. }

80.  

81. } else {

82. this.loadingStatus=0;

83. }

84. } );

85. // 上传文件到服务器

86. transfer.upload(this.filePath, serverUrl, options,false)

87. .then((data) => {

88. // success

89. alert("success");

90. }, (err) => {

91. // error

92. alert(err.code);

93. })

94. }

95.  

96. // 从服务器下载文件

97. download() {

98. const transfer: FileTransferObject = this.fileTransfer.create();

99. const url = 'http://172.20.202.131:8083/smsc/ionic/sp101/download.do';

100. var fileName='?name=test.txt';

101. transfer.download(url+fileName, this.file.dataDirectory + 'test.txt').then((entry) => {

102. console.log('download complete: ' + entry.toURL());

103.  

104. this.fileOpener.open(entry.toURL(), 'text/plain')

105. .then(() => alert('File is opened'))

106. .catch(e => alert('Error openening file'));

107. }, (error) => {

108. // handle error

109. alert(error.code);

110. });

111. }

112.  

113. // 根据url获取文件类型

114. getFileType(fileUrl: string): string {

115. return fileUrl.substring(fileUrl.lastIndexOf('.') + 1, fileUrl.length).toLowerCase();

116. }

117. // 根据url获取文件名(包含文件类型)

118. getFileName(fileUrl: string): string {

119. return fileUrl.substring(fileUrl.lastIndexOf('/') + 1, fileUrl.length).toLowerCase();

120. }

121.  

122. 文件的mimeType可参照

123. http://www.w3school.com.cn/media/media_mimeref.asp

124. http://tool.oschina.net/commons/

125. http://www.iana.org/assignments/media-types/media-types.xhtml

126. // 根据文件类型获取文件的mimeType

127. getFileMimeType(fileType: string): string {

128. let mimeType: string = '';

129. switch (fileType) {

130. case 'txt':

131. mimeType = 'text/plain';

132. break;

133. case 'docx':

134. mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';

135. break;

136. case 'doc':

137. mimeType = 'application/msword';

138. break;

139. case 'pptx':

140. mimeType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';

141. break;

142. case 'ppt':

143. mimeType = 'application/vnd.ms-powerpoint';

144. break;

145. case 'xlsx':

146. mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';

147. break;

148. case 'xls':

149. mimeType = 'application/vnd.ms-excel';

150. break;

151. case 'zip':

152. mimeType = 'application/x-zip-compressed';

153. break;

154. case 'rar':

155. mimeType = 'application/octet-stream';

156. break;

157. case 'pdf':

158. mimeType = 'application/pdf';

159. break;

160. case 'jpg':

161. mimeType = 'image/jpeg';

162. break;

163. case 'png':

164. mimeType = 'image/png';

165. break;

166. default:

167. mimeType = 'application/' + fileType;

168. break;

169. }

170. return mimeType;

171. }

java服务器编码

springmvc中要做如下配置，才能正常接收文件

1. <!-- 配置文件上传，如果没有使用文件上传可以不用配置，当然如果不配，那么配置文件中也不必引入上传组件包 -->

2. <bean id="multipartResolver"

3. class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

4. <!-- 默认编码 -->

5. <property name="defaultEncoding" value="utf-8" />

6. <!-- 文件大小最大值 -->

7. <property name="maxUploadSize" value="1048576000" />

8. <!-- 内存中的最大值 -->

9. <property name="maxInMemorySize" value="40960" />

10. </bean>

文件上传

 

1. @RequestMapping(value="/upload" ,method=RequestMethod.POST)

2. @ResponseBody

3. public Map<String, String> getFile(HttpServletRequest request,HttpServletResponse response,@RequestParam MultipartFile file){

4. response.setHeader("Access-Control-Allow-Origin", "*");

5. Map<String, String> userMap = new HashMap<String, String>();

6. userMap.put("msg", "成功");

7.  

8. //保存文件到临时目录

9. String savePath = "D:\\XXX\\server\\file\\"+ file.getOriginalFilename();

10. System.out.println(savePath);

11. File saveFile = new File(savePath);

12. try {

13. file.transferTo(saveFile);

14. } catch (IllegalStateException e) {

15. // TODO 自动生成的 catch 块

16. e.printStackTrace();

17. } catch (IOException e) {

18. // TODO 自动生成的 catch 块

19. e.printStackTrace();

20. }

21.  

22. //String fileName = file.g;

23. return userMap;

24. }

文件下载

1. @RequestMapping(value="/download")

2. @ResponseBody

3. public void downFile(HttpServletRequest request,HttpServletResponse response){

4. response.setHeader("Access-Control-Allow-Origin", "*");

5. try {

6. request.getSession().getServletContext().getRealPath("/");

7. System.out.println(request.getSession().getServletContext().getRealPath("/"));

8. request.setCharacterEncoding("UTF-8");

9. // 文件名

10. String name = request.getParameter("name");

11.  

12. // 设置响应类型（应用程序强制下载）

13. response.setContentType("application/force-download");

14. // 读取文件

15. String path = "D:\\XXX\\server\\file\\" + name;

16. InputStream in = new FileInputStream(path);

17. // 设置响应头，对文件进行url编码

18. name = URLEncoder.encode(name, "UTF-8");

19. response.setHeader("Content-Disposition", "attachment;filename=" + name);

20. response.setContentLength(in.available());

21.  

22. // 文件copy

23. OutputStream out = response.getOutputStream();

24. byte[] b = new byte[1024];

25. int len = 0;

26. while ((len = in.read(b)) != -1) {

27. out.write(b, 0, len);

28. }

29. out.flush();

30. out.close();

31. in.close();

32. } catch (Exception e) {

33. // TODO: handle exception

34. e.printStackTrace();

35. }

36. }

 

 

转自：https://blog.csdn.net/qingdatiankong/article/details/79203697