此貼適合小白學(xué)習(xí)，做出第一個(gè)自己的小Demo，大神可以選擇是否踩踏… 歡迎和我一樣的小白一起學(xué)習(xí)交流..,最近忙的很,晚上趕demo,終于到了寫(xiě)帖子的時(shí)候了.(適合有java基礎(chǔ)的同學(xué)學(xué)習(xí), 我服務(wù)器的后臺(tái)是用java寫(xiě)的,沒(méi)有用框架,用的servlet寫(xiě)的)

在實(shí)際開(kāi)發(fā)中我們很多地方都需要用到圖片上傳的功能,比如我們發(fā)一個(gè)類似于朋友圈樣的動(dòng)態(tài),必定要上傳圖片什么的,我之前做了一個(gè)一起回家的APP,在小程序剛剛發(fā)布的時(shí)候就做了, 等有時(shí)間我把細(xì)節(jié)完善了我也分享一下,哈哈,到時(shí)候各位一起學(xué)習(xí)一下,其實(shí)我也是剛剛學(xué)習(xí)微信小程序的菜鳥(niǎo),我們一起相互學(xué)習(xí),話不多說(shuō),上動(dòng)圖,

然后是什么?上代碼?
就是上代碼了(文采不好,不理解的可以@我呀)
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) {
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
  },
  onReady: function () {
    // 頁(yè)面渲染完成
  },
  onShow: function () {
    // 頁(yè)面顯示
  },
  onHide: function () {
    // 頁(yè)面隱藏
  },
  onUnload: function () {
    // 頁(yè)面關(guān)閉
  },
  chooseImg: function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默認(rèn)9
      sizeType: ['original'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
      sourceType: ['album'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        console.info(res.tempFilePaths.length);
        that.uploadFile2(tempFilePaths,0);
      }
    })
  }, uploadFile: function (file, i) {//測(cè)試,沒(méi)有什么屌用
    var that = this;
     wx.uploadFile({
            url: 'http://localhost:8080/Test/upload', //僅為示例，非真實(shí)的接口地址
            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) {//遞歸調(diào)用
    var that = this;
     wx.uploadFile({
            url: 'http://localhost:8080/Test/upload', //僅為示例，非真實(shí)的接口地址
            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});
               }
            }
          })
  }
})

最后是后臺(tái)的代碼(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");  //設(shè)置編碼
        //獲得磁盤(pán)文件條目工廠
        DiskFileItemFactory factory = new DiskFileItemFactory();
        String str = request.getSession().getServletContext().getRealPath("");
        //獲取文件需要上傳到的路徑
        String path = request.getRealPath("/upload");
        String pathStr=null;
        System.err.println("上傳的圖片路徑:"+path);
        //如果沒(méi)以下兩行設(shè)置的話，上傳大的 文件 會(huì)占用 很多內(nèi)存，
        //設(shè)置暫時(shí)存放的 存儲(chǔ)室 , 這個(gè)存儲(chǔ)室，可以和 最終存儲(chǔ)文件 的目錄不同
        /**
         * 原理 它是先存到 暫時(shí)存儲(chǔ)室，然后在真正寫(xiě)到 對(duì)應(yīng)目錄的硬盤(pán)上，
         * 按理來(lái)說(shuō) 當(dāng)上傳一個(gè)文件時(shí)，其實(shí)是上傳了兩份，第一個(gè)是以 .tem 格式的
         * 然后再將其真正寫(xiě)到 對(duì)應(yīng)目錄的硬盤(pán)上
         */
        factory.setRepository(new File(path));
        //設(shè)置 緩存的大小，當(dāng)上傳文件的容量超過(guò)該緩存時(shí)，直接放到 暫時(shí)存儲(chǔ)室
        factory.setSizeThreshold(1024*1024) ;
        //高水平的API文件上傳處理
        ServletFileUpload upload = new ServletFileUpload(factory);
        try {
            //可以上傳多個(gè)文件
            List<FileItem> list = (List<FileItem>)upload.parseRequest(request);
            for(FileItem item : list){
                //獲取表單的屬性名字
                String name = item.getFieldName();
                //如果獲取的 表單信息是普通的 文本 信息
                if(item.isFormField()){
                    //獲取用戶具體輸入的字符串 ，名字起得挺好，因?yàn)楸韱翁峤贿^(guò)來(lái)的是 字符串類型的
                    String value = item.getString() ;
                    request.setAttribute(name, value);
                }else {
                    /**
                     * 以下三步，主要獲取 上傳文件的名字
                     */
                    //獲取路徑名
                    String value = item.getName() ;
                    //索引到最后一個(gè)反斜杠
                    int start = value.lastIndexOf("");
                    //截取 上傳文件的 字符串名字，加1是 去掉反斜杠，
                    String filename = value.substring(start+1);
                    request.setAttribute(name, filename);
                    //真正寫(xiě)到磁盤(pán)上
                    //它拋出的異常 用exception 捕捉
                    //item.write( new File(path,filename) );//第三方提供的
                    //手動(dòng)寫(xiě)的
                    str+="/upload/"+filename;
                    pathStr="/upload/"+filename;
                    System.err.println("文件存儲(chǔ)的路徑:"+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) 每次讀到的數(shù)據(jù)存放在   buf 數(shù)組中
                    while( (length = in.read(buf) ) != -1){
                        //在   buf 數(shù)組中 取出數(shù)據(jù) 寫(xiě)到 （輸出流）磁盤(pán)上
                        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>

然后要這樣兩個(gè)jar包
commons-io-2.5.jar
commons-fileupload-1.3.2.jar

以上代碼復(fù)制即可用,后面有時(shí)間給你不懂后臺(tái)的折騰一個(gè)接口,讓你們直接可以上傳(在我的服務(wù)器上面部署,然后使用七牛的存儲(chǔ)空間,哈哈,目前太忙)

以上就是圖片上傳的代碼,希望你們喜歡我上傳的大冪冪的圖片!