原創聲明:本文為作者原創，未經允許不得轉載，經授權轉載需注明作者和出處
此貼適合小白學習，做出第一個自己的小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
以上代碼復制即可用,后面有時間給你不懂后臺的折騰一個接口,讓你們直接可以上傳(在我的服務器上面部署,然后使用七牛的存儲空間,哈哈,目前太忙)
以上就是圖片上傳的代碼,希望你們喜歡我上傳的大冪冪的圖片!
共24條評論
Ctrl+Enter
