最近在做小程序图片上传的需求,现在目前进度记录如下:
wxml中的页面代码,参考官网小程序示例,拷贝过来,需要在项目中导入weui.wxss,然后在自己的wxss样式中导入:
@import "../../../pages/ebei/common/lib/weui.wxss";
然后就是js代码了,这边需要上传3张图片,由于小程序的的API只能一次上传一张图片,所以采用递归的方式调用。<view class="weui-uploader__bd"> <view class="weui-uploader__files"> <block wx:for="{{imageList}}" wx:for-item="image"> <view class="weui-uploader__file"> <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image> </view> </block> </view> <view class="weui-uploader__input-box"> <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view>
data: { imageList: [], sourceTypeIndex: 2, sourceType: ['拍照', '相册', '拍照或相册'], sizeTypeIndex: 2, sizeType: ['压缩', '原图', '压缩或原图'], countIndex: 2, count: [1, 2, 3], recordId:'' },
chooseImage: function () { var that = this wx.chooseImage({ sourceType: sourceType[this.data.sourceTypeIndex], sizeType: sizeType[this.data.sizeTypeIndex], count: this.data.count[this.data.countIndex], success: function (res) { console.log(res) that.setData({ imageList: res.tempFilePaths recordId: ''//重新选择图片需要清空数据 }) var successUp = 0; //成功个数 var failUp = 0; //失败个数 var length = res.tempFilePaths.length; //总共个数 var i = 0; //第几个 console.log(res.tempFilePaths); that.uploadDIY(res.tempFilePaths, successUp, failUp, i, length); } }) }, previewImage: function (e) { var current = e.target.dataset.src wx.previewImage({ current: current, urls: this.data.imageList }) },
/* 函数描述:作为上传文件时递归上传的函数体体; * 参数描述: * filePaths是文件路径数组 * successUp是成功上传的个数 * failUp是上传失败的个数 * i是文件路径数组的指标 * length是文件路径数组的长度 */ uploadDIY(filePaths, successUp, failUp, i, length) { var that = this wx.uploadFile({ url: 'http://iscream.ngrok.cc/qpi/FileServlet', filePath: filePaths[i], name: 'fileData', success: (resp) => { console.log(filePaths[i]); console.log('statusCode:'+resp.statusCode); if (resp.data != ''){ that.data.recordId = resp.data; } if(resp.statusCode == 200){ successUp++; }else{ failUp++; } }, fail: (res) => { failUp++; }, complete: () => { i++; if (i == length) { //that.showToast('总共' + successUp + '张上传成功,' + failUp + '张上传失败!'); wx.showModal({ title: '提示', content: '总共' + successUp + '张上传成功,' + failUp + '张上传失败!', showCancel: false }) } else { //递归调用uploadDIY函数 that.uploadDIY(filePaths, successUp, failUp, i, length); } }, }); },
后台的话我这边参考的是采用Servlet的方式,获取请求,然后使用公司项目中的文件服务器地址,写入文件,也可以写入本地磁盘中。然后在web.xml中配置Servlet:package com.ebei.qpi.wxlogin.servlet; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStream; import java.io.PrintWriter; import java.net.HttpURLConnection; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import javax.annotation.Resource; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.apache.commons.lang.StringUtils; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import com.ebei.common.domain.CrmRecordFile; import com.ebei.common.util.Constants; import com.ebei.common.util.HttpRequestUtils; import com.ebei.common.util.SpringContextUtil; import com.ebei.common.util.UUID; import com.ebei.qpi.backend.service.CrmRecordFileSerivce; import com.ebei.qpi.backend.service.ProjectService; /** * 小程序,报事报修图片上传Servlet * Servlet implementation class FileServlet */ public class FileServlet extends HttpServlet { private static final long serialVersionUID = 1L; //文件目录 private String uploadFilePath = "D:\\temp"; File tempFile; //打印日志 protected Log logger = LogFactory.getLog(this.getClass()); /** * @see HttpServlet#HttpServlet() */ public FileServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { DiskFileItemFactory factory = new DiskFileItemFactory(); factory.setSizeThreshold(4096);//缓冲区大小 factory.setRepository(tempFile);//缓冲区目录 ServletFileUpload upload = new ServletFileUpload(factory); upload.setSizeMax(4194304);//最大文件尺寸,4MB SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); try { List<FileItem> fileItems = upload.parseRequest(request); Iterator<FileItem> i = fileItems.iterator(); boolean flag = false;//判断recordId是否为空 String value = ""; while(i.hasNext()){ FileItem fileItem = i.next(); String fileName = fileItem.getName(); if (fileItem.getFieldName() != null) {//formData中的数据 if (fileItem.isFormField()) {//一般的表单域,即获取formData中的参数 value = fileItem.getString("utf-8"); System.out.println(value); if (StringUtils.isEmpty(value)) { flag = true; } } } if (fileName != null) { String uuid = UUID.getUUID();//文件Id //获取Http连接 HttpURLConnection conn=HttpRequestUtils.getUrlConnection(Constants.FILE_SERVER, Constants.BUFFER_SIZE); conn.setRequestProperty("type","1"); conn.setRequestProperty("source", "s1"); conn.setRequestProperty("range", String.valueOf(0)); conn.setRequestProperty("filename", uuid+fileName); conn.setRequestProperty("filecreatetime", dateFormat.format(new Date())); conn.setRequestProperty("fileid", uuid); conn.setRequestProperty("totalsize", String.valueOf(fileItem.getSize())); //获取输出流 OutputStream out = new DataOutputStream(conn.getOutputStream()); //获取输入流 InputStream inputStream = fileItem.getInputStream(); int length = 0; byte[] buf = new byte[1024]; while((length = inputStream.read(buf)) != -1){ out.write(buf, 0, length); } out.flush(); out.close(); // 定义BufferedReader输入流来读取URL的响应 BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(),"utf-8")); String line = null; while ((line = reader.readLine()) != null) { System.out.println(line); } //保存到本地数据库关联 CrmRecordFileSerivce crmRecordFileSerivce = (CrmRecordFileSerivce)SpringContextUtil.getCtx().getBean("crmRecordFileService"); CrmRecordFile crmRecordFile = new CrmRecordFile(); crmRecordFile.setCreateTime(new Date()); crmRecordFile.setFileId(uuid); crmRecordFile.setFileType("1"); crmRecordFile.setState(1); crmRecordFile.setModify("0"); if (flag) {//判断关联记录Id是否为空,如果为空,则新增,否则沿用 crmRecordFile.setRectId(UUID.getUUID()); PrintWriter writer = response.getWriter();//给小程序端发送反馈信息 writer.write(crmRecordFile.getRectId()); System.out.println("UUID:" + crmRecordFile.getRectId()); }else { crmRecordFile.setRectId(value); } crmRecordFileSerivce.save(crmRecordFile); } } System.out.println("upload success"); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); logger.info("upload throw exception!"); } } }
<servlet> <description></description> <display-name>FileServlet</display-name> <servlet-name>FileServlet</servlet-name> <servlet-class>com.ebei.qpi.wxlogin.servlet.FileServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>FileServlet</servlet-name> <url-pattern>/FileServlet</url-pattern> </servlet-mapping>
暂时就是这样。
------------------
加上了后台跟小程序交互数据的逻辑,好坑。。。
小程序图片上传,后台使用Servlet上传业务逻辑
最新推荐文章于 2021-11-11 18:16:04 发布