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

3. 选择文件

5. 文件：{{filePath}}

7. 上传文件

9. 进度：{{loadingStatus}}

10.  

12. 下载文件

▲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中要做如下配置，才能正常接收文件

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！