麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

微信小程序上傳圖片功能(附后端代碼)

2020-03-21 16:17:16
字體:
來源:轉載
供稿:網友

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

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

上傳圖片

首先選擇圖片

通過wx.chooseImage(OBJECT)實現

微信小程序,上傳圖片,小程序開發

官方示例代碼

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

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

上傳圖片

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

原理就是客戶端發起一個 HTTPS POST 請求,其中 content-type為 multipart/form-data。

微信小程序,上傳圖片,小程序開發

官方示例代碼

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

示例代碼

看完了官方文檔, 寫一個上傳圖片就沒有那么麻煩了,下面是真實場景的代碼

import constant from '../../common/constant';Page({ data: { src: "../../image/photo.png", //綁定image組件的src  //略... }, onLoad: function (options) {  //略...  }, uploadPhoto() { var that = this;  wx.chooseImage({  count: 1, // 默認9  sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有  success: function (res) {  // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的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: {  //和服務器約定的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寫的,一開始的時候,后端開始用了一些框架接收上傳的圖片,出現了各種問題,后來使用了純粹的Servlet就沒有了問題, 把代碼貼出來省的以后麻煩了。

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

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、創建一個DiskFileItemFactory工廠    DiskFileItemFactory factory = new DiskFileItemFactory();    //2、創建一個文件上傳解析器    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);    // 若是一個一般的表單域, 打印信息     if (item.isFormField()) {      String value = item.getString("utf-8");      if("session_token".equals(name)){      sessionToken = value;     }    }else {     if("file".equals(name)){      file = item;     }    }    }   //session校驗   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));     }    });    // 請求成功的場合    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); }}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 成人免费网站在线观看 | 精品国产视频一区二区三区 | 桥本有菜免费av一区二区三区 | 亚洲天堂成人在线观看 | 精品一区二区在线播放 | 视频一区二区视频 | 黄色成年在线观看 | 成人午夜淫片a | 337p粉嫩大胆噜噜噜亚瑟影院 | 在线观看免费视频麻豆 | 综合网日日天干夜夜久久 | 精品一区二区三区在线观看国产 | 日韩欧美激情视频 | 日韩视频一区二区三区在线观看 | 素人视频在线观看免费 | 舌头伸进添的我好爽高潮网站 | 天使萌一区二区三区免费观看 | 一级毛片免费版 | 久久精精品 | 亚洲欧美国产精品va在线观看 | 日本高清视频网站www | 中文字幕一二区 | 久久国产精品99国产 | 一本色道精品久久一区二区三区 | 黄片一级毛片 | 国产一区二区视频观看 | 久久久www成人免费毛片 | 欧美精品一区二区三区在线播放 | 亚洲天堂成人在线 | 欧美成年性h版影视中文字幕 | 国产亚洲在线 | 精品中文视频 | 成人一级视频 | 他也色在线视频 | 中文黄色一级片 | 日韩av电影免费在线观看 | 成品片a免人视频 | 精品亚洲综合 | 久久精品中文字幕一区二区三区 | 91短视频免费 | 日韩美香港a一级毛片免费 欧美一级淫片007 |