微信小程序上傳圖片實(shí)戰(zhàn)案例解析

這次給大家?guī)?lái)微信小程序上傳圖片實(shí)戰(zhàn)案例解析，微信小程序上傳圖片實(shí)戰(zhàn)案例的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。愛(ài)掏網(wǎng) - it200.com

在網(wǎng)上看了好多小程序上傳圖片，java后端接收的示例，但是不管在哪個(gè)網(wǎng)站看的，代碼基本是一樣的，都是代碼特別多。愛(ài)掏網(wǎng) - it200.com

所以就自己寫一個(gè)比較簡(jiǎn)單的。愛(ài)掏網(wǎng) - it200.com

?一 小程序端

user.wxml

?
??
???
??
?點(diǎn)擊選擇頭像?

user.js

//?更換頭像?
span?style="font-size:18px;color:#FF0000;">?updateHead:?function?()?{?
??var?that?=?this?
??//?上傳圖片?獲取路徑?
??wx.chooseImage({?
???success:?function?(res)?{?
????console.log('臨時(shí)路徑：'?+?res.tempFilePaths[0])?
??????wx.uploadFile({?
???????url:?app.globalData.baseUrl?+?'/file/uploadFile',?
???????filePath:?res.tempFilePaths[0],?
???????name:?'file',?
???????success:?function?(result)?{?
????????console.log("返回路徑："?+?result.data)?
???????}?
??????})?
???},?
??})?
?},

?二 java端

package?cn.helloxhs.moudle.common;?
?
import?java.io.File;?
import?java.io.FileInputStream;?
import?java.io.FileNotFoundException;?
import?java.io.FileOutputStream;?
import?java.io.IOException;?
import?java.io.InputStream;?
import?java.io.OutputStream;?
?
import?javax.servlet.http.HttpServletRequest;?
import?javax.servlet.http.HttpServletResponse;?
?
import?org.apache.commons.fileupload.disk.DiskFileItem;?
import?org.springframework.stereotype.Controller;?
import?org.springframework.web.bind.annotation.RequestMapping;?
import?org.springframework.web.bind.annotation.ResponseBody;?
import?org.springframework.web.multipart.MultipartFile;?
import?org.springframework.web.multipart.commons.CommonsMultipartFile;?
?
import?cn.helloxhs.base.controller.BaseController;?
?
/**?
?*?類說(shuō)明?
?*?
?*?@author?肖荷山?
?*?@version?創(chuàng)建時(shí)間：2024年12月23日?上午11:14:27?
?*/?
@Controller?
@RequestMapping("/file")?
public?class?FileController?extends?BaseController?{?
??@RequestMapping("/uploadFile")?
??@ResponseBody?
??public?Object?uploadFile(HttpServletResponse?response,?HttpServletRequest?request,?MultipartFile?file)?{?
????String?realPath?=?request.getSession().getServletContext().getRealPath("/temp");?
????try?{?
??????CommonsMultipartFile?cf?=?(CommonsMultipartFile)?file;?
??????DiskFileItem?fi?=?(DiskFileItem)?cf.getFileItem();?
??????File?f1?=?fi.getStoreLocation();?
??????InputStream?ips?=?new?FileInputStream(f1);?
??????OutputStream?ops?=?new?FileOutputStream(realPath?+?"/"?+?"xhs.jpg");?
??????byte[]?b?=?new?byte[1024];?
??????int?len;?
??????try?{?
????????while?((len?=?ips.read(b))?!=?-1)?{?
??????????ops.write(b,?0,?len);?
????????}?
??????}?catch?(IOException?e)?{?
????????e.printStackTrace();?
??????}?finally?{?
????????//?完畢，關(guān)閉所有鏈接?
????????try?{?
??????????ops.close();?
??????????ips.close();?
????????}?catch?(IOException?e)?{?
??????????e.printStackTrace();?
????????}?
??????}?
?
????}?catch?(FileNotFoundException?e)?{?
??????e.printStackTrace();?
????}?
????return?realPath;?
??}?
?
}

圖片存在了項(xiàng)目的temp目錄下

簡(jiǎn)單就好，沒(méi)其他功能，單純上傳圖片。愛(ài)掏網(wǎng) - it200.com

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注愛(ài)掏網(wǎng) - it200.com其它相關(guān)文章！

推薦閱讀：

如何使用微信小程序做出圖片上傳

如何操作JS生成指隨機(jī)數(shù)與隨機(jī)序列

以上就是微信小程序上傳圖片實(shí)戰(zhàn)案例解析的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注愛(ài)掏網(wǎng) - it200.com其它相關(guān)文章！