微信小程序上传图片到服务器

  • • 发表于 3年前
  • • 作者 心城
  • • 11318 人浏览
  • • 22 条评论
  • • 最后编辑时间 9个月前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

此贴适合小白学习,做出第一个自己的小Demo,大神可以选择是否踩踏… 欢迎和我一样的小白一起学习交流..,最近忙的很,晚上赶demo,终于到了写帖子的时候了.(适合有java基础的同学学习, 我服务器的后台是用java写的,没有用框架,用的servlet写的)

在实际开发中我们很多地方都需要用到图片上传的功能,比如我们发一个类似于朋友圈样的动态,必定要上传图片什么的,我之前做了一个一起回家的APP,在小程序刚刚发布的时候就做了, 等有时间我把细节完善了我也分享一下,哈哈,到时候各位一起学习一下,其实我也是刚刚学习微信小程序的菜鸟,我们一起相互学习,话不多说,上动图,

然后是什么?上代码?
就是上代码了(文采不好,不理解的可以@我呀)
WXML

<text>单张或多张图片上传</text>
<view wx:for="{{perImgSrc}}" wx:key="ind" wx:for-item="item">
    <view>{{ind}}</view>
    <image src="http://localhost:8080/Test/{{item.src}}"></image> 
</view>   
<button bindtap="chooseImg">选择图片</button>

最主要的js代码:

// pages/index/index.js
var total=[];
Page({
  data: {
    perImgSrc: []
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  chooseImg: function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        console.info(res.tempFilePaths.length);
        that.uploadFile2(tempFilePaths,0);
      }
    })
  }, uploadFile: function (file, i) {//测试,没有什么屌用
    var that = this;
     wx.uploadFile({
            url: 'http://localhost:8080/Test/upload', //仅为示例,非真实的接口地址
            filePath: file,
            name: 'file',
            success: function (res) {
               var obj = new Object();
               obj.ind = i+1;
               var data = res.data;
               console.info(data);
               obj.src = data;
               console.info("---------------------------------");
               console.info(obj);
               that.data.perImgSrc.push(obj);

            }
          })
  }, uploadFile2: function (file, i) {//递归调用
    var that = this;
     wx.uploadFile({
            url: 'http://localhost:8080/Test/upload', //仅为示例,非真实的接口地址
            filePath: file[i],
            name: 'file',
            success: function (res) {
               var obj = new Object();
               obj.ind = i+1;
               var data = res.data;
               console.info(data);
               obj.src = data;
               console.info("---------------------------------");
               console.info(obj);

               if(!((i+1)==file.length)){
                 total.push(obj);
                 that.uploadFile2(file,i+1);
               }else{
                 total.push(obj);
                 that.setData({perImgSrc:total});
               }
            }
          })
  }
})

最后是后台的代码(java):

package cn.yunkuaiji.servlet;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.List;

/**
 * Created by yyt on 2016-12-12.
 */
public class UploadServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");  //设置编码
        //获得磁盘文件条目工厂
        DiskFileItemFactory factory = new DiskFileItemFactory();
        String str = request.getSession().getServletContext().getRealPath("");
        //获取文件需要上传到的路径
        String path = request.getRealPath("/upload");
        String pathStr=null;
        System.err.println("上传的图片路径:"+path);
        //如果没以下两行设置的话,上传大的 文件 会占用 很多内存,
        //设置暂时存放的 存储室 , 这个存储室,可以和 最终存储文件 的目录不同
        /**
         * 原理 它是先存到 暂时存储室,然后在真正写到 对应目录的硬盘上,
         * 按理来说 当上传一个文件时,其实是上传了两份,第一个是以 .tem 格式的
         * 然后再将其真正写到 对应目录的硬盘上
         */
        factory.setRepository(new File(path));
        //设置 缓存的大小,当上传文件的容量超过该缓存时,直接放到 暂时存储室
        factory.setSizeThreshold(1024*1024) ;
        //高水平的API文件上传处理
        ServletFileUpload upload = new ServletFileUpload(factory);
        try {
            //可以上传多个文件
            List<FileItem> list = (List<FileItem>)upload.parseRequest(request);
            for(FileItem item : list){
                //获取表单的属性名字
                String name = item.getFieldName();
                //如果获取的 表单信息是普通的 文本 信息
                if(item.isFormField()){
                    //获取用户具体输入的字符串 ,名字起得挺好,因为表单提交过来的是 字符串类型的
                    String value = item.getString() ;
                    request.setAttribute(name, value);
                }else {
                    /**
                     * 以下三步,主要获取 上传文件的名字
                     */
                    //获取路径名
                    String value = item.getName() ;
                    //索引到最后一个反斜杠
                    int start = value.lastIndexOf("");
                    //截取 上传文件的 字符串名字,加1是 去掉反斜杠,
                    String filename = value.substring(start+1);
                    request.setAttribute(name, filename);
                    //真正写到磁盘上
                    //它抛出的异常 用exception 捕捉
                    //item.write( new File(path,filename) );//第三方提供的
                    //手动写的
                    str+="/upload/"+filename;
                    pathStr="/upload/"+filename;
                    System.err.println("文件存储的路径:"+str);
                    File file=new File(str);
                    OutputStream out = new FileOutputStream(file);
                    InputStream in = item.getInputStream() ;
                    int length = 0 ;
                    byte [] buf = new byte[1024] ;
                    System.out.println("获取上传文件的总共的容量:"+item.getSize());
                    // in.read(buf) 每次读到的数据存放在   buf 数组中
                    while( (length = in.read(buf) ) != -1){
                        //在   buf 数组中 取出数据 写到 (输出流)磁盘上
                        out.write(buf, 0, length);
                    }
                    in.close();
                    out.close();
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
        catch (Exception e) {
        }
        PrintWriter printWriter=response.getWriter();
       // printWriter.print("{"path":""+pathStr+""}");
        printWriter.print(pathStr);
        printWriter.flush();
        printWriter.close();
    }
}

webXML

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <servlet>
        <servlet-name>uploadServlet</servlet-name>
        <servlet-class>cn.yunkuaiji.servlet.UploadServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>uploadServlet</servlet-name>
        <url-pattern>/upload</url-pattern>
    </servlet-mapping>
</web-app>

然后要这样两个jar包
commons-io-2.5.jar
commons-fileupload-1.3.2.jar

以上代码复制即可用,后面有时间给你不懂后台的折腾一个接口,让你们直接可以上传(在我的服务器上面部署,然后使用七牛的存储空间,哈哈,目前太忙)

以上就是图片上传的代码,希望你们喜欢我上传的大幂幂的图片!

分享到:
评论区(共22条评论)
22条评论
Ctrl+Enter
作者

心城

心城

APP:2 帖子:3 回复:40 积分:1083

已加入社区[1133]天

学习使人进步

作者详情》
Top