欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

微信小程序上傳圖片功能源代碼

不懂微信小程序上傳圖片功能源代碼?其實(shí)想解決這個(gè)問題也不難,下面讓小編帶著大家一起學(xué)習(xí)怎么去解決,希望大家閱讀完這篇文章后大所收獲。

創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為江寧企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站制作,江寧網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

幾乎每個(gè)程序都需要用到圖片,在小程序中我們可以通過image組件顯示圖片。

當(dāng)然小程序也是可以上傳圖片的,微信小程序文檔也寫的很清楚。

上傳圖片

首先選擇圖片

通過wx.chooseImage(OBJECT)實(shí)現(xiàn)

微信小程序上傳圖片功能源代碼

官方示例代碼

wx.chooseImage({
 count: 1, // 默認(rèn)9
 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
 sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī),默認(rèn)二者都有
 success: function (res) {
 // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
 var tempFilePaths = res.tempFilePaths
 }
})

圖片最多可以選擇9張, 也可以通過拍攝照片實(shí)現(xiàn),當(dāng)選擇完圖片之后會(huì)獲取到圖片路徑, 這個(gè)路徑在本次啟動(dòng)期間有效。
如果需要保存就需要用wx.saveFile(OBJECT)

上傳圖片

通過wx.uploadFile(OBJECT) 可以將本地資源文件上傳到服務(wù)器

原理就是客戶端發(fā)起一個(gè) HTTPS POST 請(qǐng)求,其中 content-type為 multipart/form-data。

微信小程序上傳圖片功能源代碼

官方示例代碼

wx.chooseImage({
 success: function(res) {
 var tempFilePaths = res.tempFilePaths
 wx.uploadFile({
 url: 'http://example.weixin.qq.com/upload', //僅為示例,非真實(shí)的接口地址
 filePath: tempFilePaths[0],
 name: 'file',
 formData:{
 'user': 'test'
 },
 success: function(res){
 var data = res.data
 //do something
 }
 })
 }
})

示例代碼

看完了官方文檔, 寫一個(gè)上傳圖片就沒有那么麻煩了,下面是真實(shí)場(chǎng)景的代碼

import constant from '../../common/constant';
Page({
 data: {
 src: "../../image/photo.png", //綁定image組件的src
 //略...
 },
 onLoad: function (options) {
 //略... 
 },
 uploadPhoto() {
 var that = this; 
 wx.chooseImage({
 count: 1, // 默認(rèn)9
 sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
 sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī),默認(rèn)二者都有
 success: function (res) {
 // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
 var tempFilePaths = res.tempFilePaths;
 upload(that, tempFilePaths);
 }
 })
 }
})

function upload(page, path) {
 wx.showToast({
 icon: "loading",
 title: "正在上傳"
 }),
 wx.uploadFile({
 url: constant.SERVER_URL + "/FileUploadServlet",
 filePath: path[0], 
 name: 'file',
 header: { "Content-Type": "multipart/form-data" },
 formData: {
 //和服務(wù)器約定的token, 一般也可以放在header中
 'session_token': wx.getStorageSync('session_token')
 },
 success: function (res) {
 console.log(res);
 if (res.statusCode != 200) { 
  wx.showModal({
  title: '提示',
  content: '上傳失敗',
  showCancel: false
  })
  return;
 }
 var data = res.data
 page.setData({ //上傳成功修改顯示頭像
  src: path[0]
 })
 },
 fail: function (e) {
 console.log(e);
 wx.showModal({
  title: '提示',
  content: '上傳失敗',
  showCancel: false
 })
 },
 complete: function () {
 wx.hideToast(); //隱藏Toast
 }
 })
}

后端代碼

后端是用java寫的,一開始的時(shí)候,后端開始用了一些框架接收上傳的圖片,出現(xiàn)了各種問題,后來使用了純粹的Servlet就沒有了問題, 把代碼貼出來省的以后麻煩了。

注意: 代碼使用了公司內(nèi)部的框架,建議修改后再使用

public class FileUploadServlet extends HttpServlet {

 private static final long serialVersionUID = 1L;
 private static Logger logger = LoggerFactory.getLogger(FileUploadServlet.class);

 public FileUploadServlet() {
 super();
 }

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 JsonMessage<Object> message = new JsonMessage<Object>();
 EOSResponse eosResponse = null;
 String sessionToken = null;
 FileItem file = null;
 InputStream in = null;
 ByteArrayOutputStream swapStream1 = null;
 try {
  request.setCharacterEncoding("UTF-8"); 

  //1、創(chuàng)建一個(gè)DiskFileItemFactory工廠 
  DiskFileItemFactory factory = new DiskFileItemFactory(); 
  //2、創(chuàng)建一個(gè)文件上傳解析器 
  ServletFileUpload upload = new ServletFileUpload(factory);

  //解決上傳文件名的中文亂碼 
  upload.setHeaderEncoding("UTF-8"); 
  // 1. 得到 FileItem 的集合 items 
  List<FileItem> items = upload.parseRequest(request);
  logger.info("items:{}", items.size());
  // 2. 遍歷 items: 
  for (FileItem item : items) { 
  String name = item.getFieldName(); 
  logger.info("fieldName:{}", name);
  // 若是一個(gè)一般的表單域, 打印信息 
  if (item.isFormField()) { 
   String value = item.getString("utf-8"); 
   if("session_token".equals(name)){
   sessionToken = value;
   }
  }else {
   if("file".equals(name)){
   file = item;
   }
  } 
  }
  //session校驗(yàn)
  if(StringUtils.isEmpty(sessionToken)){
  message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);
  message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);
  }
  String userId = redisUtils.hget(sessionToken,"userId");
  logger.info("userId:{}", userId);
  if(StringUtils.isEmpty(userId)){
  message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);
  message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);
  }
  //上傳文件
  if(file == null){
  }else{
  swapStream1 = new ByteArrayOutputStream();

  in = file.getInputStream();
  byte[] buff = new byte[1024];
  int rc = 0;
  while ((rc = in.read(buff)) > 0) {
   swapStream1.write(buff, 0, rc);
  }

  Usr usr = new Usr();
  usr.setObjectId(Integer.parseInt(userId));

  final byte[] bytes = swapStream1.toByteArray();

  eosResponse= ServerProxy.getSharedInstance().saveHeadPortrait(usr, new RequestOperation() {

   @Override
   public void addValueToRequest(EOSRequest request) {
   request.addMedia("head_icon_media", new EOSMediaData(EOSMediaData.MEDIA_TYPE_IMAGE_JPEG, bytes));
   }
  });

  // 請(qǐng)求成功的場(chǎng)合
  if (eosResponse.getCode() == 0) {
   message.setStatus(ConstantUnit.SUCCESS);
  } else {
   message.setStatus(String.valueOf(eosResponse.getCode()));
  }
  }
 } catch (Exception e) {
  e.printStackTrace();
 } finally{
  try {
  if(swapStream1 != null){
   swapStream1.close();
  }
  } catch (IOException e) {
  e.printStackTrace();
  }
  try {
  if(in != null){
   in.close();
  }
  } catch (IOException e) {
  e.printStackTrace();
  }
 }
 PrintWriter out = response.getWriter(); 
 out.write(JSONObject.toJSONString(message)); 
 }

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 doGet(request, response);
 }

}

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享微信小程序上傳圖片功能源代碼內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,遇到問題就找創(chuàng)新互聯(lián),詳細(xì)的解決方法等著你來學(xué)習(xí)!

分享題目:微信小程序上傳圖片功能源代碼
標(biāo)題鏈接:http://www.chinadenli.net/article32/iiiepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈外貿(mào)建站域名注冊(cè)服務(wù)器托管動(dòng)態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)