今回は、WeChat アプレットを使用して 寫真をアップロードする方法と、WeChat アプレットを使用して寫真をアップロードする際の メモ について説明します。実際のケースを見てみましょう。

まず、WeChat ミニプログラムの API を見てみましょう

ページ効果を見てみましょう

全體像を表示してください

wxmlファイルコード:

<view class="weui-cell">?
????<view class="weui-cellbd">?
?????<view class="weui-uploader">?
??????<view class="weui-uploaderhd">?
???????<view class="weui-uploadertitle">營業(yè)執(zhí)照</view>?
???????<view class="weui-uploaderinfo">{{imageList.length}}/{{count[countIndex]}}</view>?
??????</view>?
??????<view class="weui-uploaderbd">?
???????<view class="weui-uploaderfiles">?
????????<block wx:for="{{imageList}}" wx:for-item="image">?
?????????<view class="weui-uploaderfile">?
??????????<image class="weui-uploaderimg" src="{{image}}" src="{{image}}" bindtap="previewImage"></image>?
?????????</view>?
????????</block>?
???????</view>?
???????<view class="weui-uploaderinput-box">?
????????<view class="weui-uploaderinput" bindtap="chooseImage"></view>?
???????</view>?
??????</view>?
?????</view>?
??</view>?
</view>

js ファイル コード

chooseImage:?function?()?{?
??var?that?=?this;?
??console.log('aaaaaaaaaaaaaaaaaaaa')?
??
??wx.chooseImage({?
???count:?this.data.count[this.data.countIndex],?
???success:?function?(res)?{?
????console.log('ssssssssssssssssssssssssss')?
????//緩存下?
????wx.showToast({?
?????title:?'正在上傳...',?
?????icon:?'loading',?
?????mask:?true,?
?????duration:?2000,?
?????success:?function?(ress)?{?
??????console.log('成功加載動畫');?
?????}?
????})?
?
????console.log(res)?
????that.setData({?
?????imageList:?res.tempFilePaths?
????})?
????//獲取第一張圖片地址?
????var?filep?=?res.tempFilePaths[0]?
????//向服務器端上傳圖片?
????//?getApp().data.servsers,這是在app.js文件里定義的后端服務器地址?
????wx.uploadFile({?
?????url:?getApp().data.servsers?+?'/weixin/wx_upload.do',?
?????filePath:?filep,?
?????name:?'file',?
?????formData:?{?
??????'user':?'test'?
?????},?
?????success:?function?(res)?{?
??????console.log(res)?
??????console.log(res.data)?
??????var?sss=?JSON.parse(res.data)?
??????var?dizhi?=?sss.dizhi;?
??????//輸出圖片地址?
??????console.log(dizhi);?
??????that.setData({?
???????"dizhi":?dizhi?
??????})?
?
??????//do?something??
?????},?fail:?function?(err)?{?
??????console.log(err)?
?????}??
??????});?
???}?
??})?
?},?
?previewImage:?function?(e)?{?
??var?current?=?e.target.dataset.src?
?
??wx.previewImage({?
?
???current:?current,?
???urls:?this.data.imageList?
??})?
?}

java バックエンド コード:

//獲取當前日期時間的string類型用于文件名防重復?
??public?String?dates(){?
?????Date?currentTime?=?new?Date();?
?????SimpleDateFormat?formatter?=?new?SimpleDateFormat("yyyyMMddHHmmss");?
?????String?dateString?=?formatter.format(currentTime);?
?????return?dateString;?
??}?
??@RequestMapping("wx_upload.do")?
??public?void?uploadPicture(HttpServletRequest?request,?HttpServletResponse?response,PrintWriter?writer)?throws?Exception?{?
????System.out.println("進入get方法！");?
??//獲取從前臺傳過來得圖片?
????MultipartHttpServletRequest?req?=(MultipartHttpServletRequest)request;?
????MultipartFile?multipartFile?=?req.getFile("file");?
??//獲取圖片的文件類型?
????String?houzhu=multipartFile.getContentType();?
????int?one?=?houzhu.lastIndexOf("/");?
????System.out.println(houzhu.substring((one+1),houzhu.length()));?
????System.out.println(multipartFile.getName());?
??//根據獲取到的文件類型截取出圖片后綴?
????String?type=houzhu.substring((one+1),houzhu.length());?
????System.out.println(multipartFile.getContentType());?
?
????String?filename;?
??//?request.getRealPath獲取我們項目的根地址在加上我們要保存的地址?
????String?realPath?=?request.getRealPath("/upload/wximg/");?
????try?{?
??????File?dir?=?new?File(realPath);?
??????if?(!dir.exists())?{?
????????dir.mkdir();?
??????}?
??????//獲取到當前的日期時間用戶生成文件名防止文件名重復?
??????String?filedata=this.dates();?
????//生成一個隨機數來防止文件名重復?
??????int?x=(int)(Math.random()*1000);?
??????filename="zhongshang"+x+filedata;?
??????System.out.println(x);?
????將文件的地址和生成的文件名拼在一起?
??????File?file?=?new?File(realPath,filename+"."+type);?
??????multipartFile.transferTo(file);?
????//將圖片在項目中的地址和isok狀態(tài)儲存為json格式返回給前臺，由于公司項目中沒有fastjson只能用這個?
??????JSONObject?jsonObject=new?JSONObject();?
??????jsonObject.put("isok",1);?
??????jsonObject.put("dizhi","/upload/wximg/"+filename+"."+type);?
?
??????writer.write(jsonObject.toString());?
????}?catch?(IOException?e)?{?
??????e.printStackTrace();?
????}?catch?(IllegalStateException?e)?{?
??????e.printStackTrace();?
????}?
}

フロントエンド js によって以前に出力された內容を見てみましょう:

ブラウザを開いて、次のアドレスを使用します。私たちのサーバーに、バックグラウンドで返された JSON の dizhi フィールドを追加して、この畫像にアクセスします

畫像がサーバーに入力されていることを確認し、サーバーのルート アドレスで /upload/wximg を開きます。サイドプロジェクト

複數の寫真をアップロードしたい場合は、アップロードする數に応じてjsでループしてアップロードできます。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中國語 Web サイトの他の関連記事に注目してください。

推奨書籍:

js の 3 つの使用例の詳細な説明 (コード付き)

JS の読み込みメソッドの使用方法のまとめ

以上がWeChat アプレットを使用して寫真をアップロードする方法の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。