微信ウィジェットのアップロードとダウンロードファイル
29686 ワード
準備が必要な作業:
①、微信小プログラム工程を確立し、以下のコードを作成する.
②、IDEでspringboot+webプロジェクトを作成し、受信ファイルを作成し、ダウンロードファイルを提供する方式で、アップロードしたファイル関連情報をmysqlデータベースに記録する.詳細はhttps://www.cnblogs.com/chenfeifen/p/10261980.html
一、indexを配置する.wxml
二、indexを配置する.wxss
三、indexを配置する.js
転載先:https://www.cnblogs.com/chenfeifen/p/10261940.html
①、微信小プログラム工程を確立し、以下のコードを作成する.
②、IDEでspringboot+webプロジェクトを作成し、受信ファイルを作成し、ダウンロードファイルを提供する方式で、アップロードしたファイル関連情報をmysqlデータベースに記録する.詳細はhttps://www.cnblogs.com/chenfeifen/p/10261980.html
一、indexを配置する.wxml
1
2 <view class="container">
3 <view class="userinfo">
4 <button bindtap="upload"> button>
5 <button bindtap="download"> button>
6 view>
7 <view class="imginfo">
8 <block wx:for="{{tempFilePaths}}" wx:key="{{index}}">
9 <image src="{{item }}" bindtap="listenerButtonPreviewImage" data-index="{{index}}" style="width: 100%;"/>
10 block>
11 <block> <image src='{{downloadPicturePath}}' bindtap='preview_download_picture'>image>
12 block>
13 view>
14 view>二、indexを配置する.wxss
1 1 /**index.wxss**/
2 2 .userinfo {
3 3 display: flex;
4 4 /* flex-direction: column; */
5 5 align-items: center;
6 6 }
7 7 .imginfo {
8 8 display: flex;
9 9 flex-direction: column;
10 10 align-items: center;
11 11 }
12 12 .userinfo-avatar {
13 13 width: 128rpx;
14 14 height: 128rpx;
15 15 margin: 20rpx;
16 16 border-radius: 50%;
17 17 }
18 18
19 19 .userinfo-nickname {
20 20 color: #aaa;
21 21 }
22 22
23 23 .usermotto {
24 24 margin-top: 200px;
25 25 }三、indexを配置する.js
1 //index.js
2 //
3 const app = getApp()
4 Page({
5 /**
6 *
7 */
8 data: {
9 tempFilePaths: [],
10 downloadPicturePath:''
11 },
12 /**
13 *
14 */
15 upload: function () {
16 let that = this;
17 wx.chooseImage({
18 count: 9, // 9
19 sizeType: ['original', 'compressed'], // ，
20 sourceType: ['album', 'camera'], // ，
21 success: res => {
22 wx.showToast({
23 title: ' ...',
24 icon: 'loading',
25 mask: true,
26 duration: 1000
27 })
28 // ，tempFilePath img src
29 let tempFilePaths = res.tempFilePaths;
30 that.setData({
31 tempFilePaths: tempFilePaths
32 })
33 /**
34 *
35 */
36 var count = 0;
37 //
38 for (var i = 0; i < this.data.tempFilePaths.length;i++){
39 wx.uploadFile({
40 url: "http://*****/upload",// url
41 filePath: tempFilePaths[i],
42 name: 'filename',
43 header: {
44 "Content-Type": "multipart/form-data"
45 },
46 success: function (res) {
47 count++;
48 // ,
49 if (count == tempFilePaths.length) {
50 wx.hideToast();
51 }
52 wx.showToast({
53 title: ' ',
54 icon: '',
55 mask: true,
56 duration: 1500
57 })
58 },
59 fail: function (res) {
60 wx.hideToast();
61 wx.showModal({
62 title: ' ',
63 content: ' ',
64 showCancel: false,
65 success: function (res) { }
66 })
67 }
68 });
69 }
70 }
71 })
72 },
73 /**
74 *
75 */
76 preview_download_picture:function(){
77 wx.previewImage({
78 current: this.data.downloadPicturePath,
79 urls: this.data.downloadPicturePath,
80 })
81 },
82 /**
83 *
84 */
85 download:function(){
86 var that = this;
87 wx.downloadFile({
88 url:"http://******/download", // ，
89 success: function (res) {
90 console.log(res)
91 // ， success ，
92 if (res.statusCode === 200) {
93 wx.playVoice({
94 filePath: res.tempFilePath
95 })
96 wx.showToast({
97 title: ' ',
98 icon: '',
99 mask: true,
100 duration: 1500
101 })
102 that.setData({
103 downloadPicturePath: res.tempFilePath//
104 })
105 }
106 //
107 // wx.saveImageToPhotosAlbum({
108 // filePath: res.tempFilePath,
109 // success:
110 // function (data) {
111 // console.log(data);
112 // // wx.showModal({
113 // // title: ' ',
114 // // content: ' ',
115 // // })
116 // wx.showToast({
117 // title: ' ',
118 // icon: '',
119 // mask: true,
120 // duration: 1500
121 // })
122 // that.setData({
123 // downloadPicturePath: res.tempFilePath
124 // })
125 // },
126 // })
127 }
128 });
129 },
130 /**
131 *
132 */
133 listenerButtonPreviewImage: function (e) {
134 let index = e.target.dataset.index;
135 let that = this;
136 wx.previewImage({
137 current: that.data.tempFilePaths[index],
138 urls: that.data.tempFilePaths,
139 //
140 success: function (res) {
141 //console.log(res);
142 },
143 //
144 fail: function () {
145 //console.log('fail')
146 }
147 })
148 },
149
150 /**
151 * --
152 */
153 onLoad: function (options) {
154
155 },
156
157 /**
158 * --
159 */
160 onReady: function () {
161
162 },
163
164 /**
165 * --
166 */
167 onShow: function () {
168
169 },
170
171 /**
172 * --
173 */
174 onHide: function () {
175
176 },
177
178 /**
179 * --
180 */
181 onUnload: function () {
182
183 },
184
185 /**
186 * --
187 */
188 onPullDownRefresh: function () {
189
190 },
191
192 /**
193 *
194 */
195 onReachBottom: function () {
196
197 },
198
199 /**
200 *
201 */
202 onShareAppMessage: function () {
203
204 }
205 })転載先:https://www.cnblogs.com/chenfeifen/p/10261940.html