幾乎每個(gè)程序都需要用到圖片。
在小程序中我們可以通過image組件顯示圖片算谈。
當(dāng)然小程序也是可以上傳圖片的涩禀，微信小程序文檔也寫的很清楚。
上傳圖片
首先選擇圖片
通過wx.chooseImage(OBJECT)實(shí)現(xiàn)
官方示例代碼
wx.chooseImage({
count: 1, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖然眼，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)艾船，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths
}
})
圖片最多可以選擇9張, 也可以通過拍攝照片實(shí)現(xiàn)高每，當(dāng)選擇完圖片之后會(huì)獲取到圖片路徑, 這個(gè)路徑在本次啟動(dòng)期間有效屿岂。
如果需要保存就需要用wx.saveFile(OBJECT)
上傳圖片
通過wx.uploadFile(OBJECT) 可以將本地資源文件上傳到服務(wù)器。
原理就是客戶端發(fā)起一個(gè) HTTPS POST 請(qǐng)求鲸匿，其中 content-type為 multipart/form-data爷怀。
官方示例代碼
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'http://example.weixin.qq.com/upload', //僅為示例，非真實(shí)的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData:{
'user': 'test'
},
success: function(res){
var data = res.data
//do something
}
})
}
})
示例代碼
看完了文檔, 寫一個(gè)上傳圖片就沒有那么麻煩了,下面是真實(shí)場(chǎng)景的代碼
import constant from '../../common/constant';
Page({
data: {
src: "../../image/photo.png", //綁定image組件的src
//略...
},
onLoad: function (options) {
//略...
},
uploadPhoto() {
var that = this;
wx.chooseImage({
count: 1, // 默認(rèn)9
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖带欢，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)运授，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表烤惊，tempFilePath可以作為img標(biāo)簽的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: {
//和服務(wù)器約定的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寫的，一開始的時(shí)候吁朦，后端開始用了一些框架接收上傳的圖片柒室，出現(xiàn)了各種問題，后來(lái)使用了純粹的Servlet就沒有了問題, 把代碼貼出來(lái)省的以后麻煩了逗宜。
注意: 代碼使用了公司內(nèi)部的框架雄右，建議修改后再使用
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、創(chuàng)建一個(gè)DiskFileItemFactory工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
//2纺讲、創(chuàng)建一個(gè)文件上傳解析器
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);
// 若是一個(gè)一般的表單域, 打印信息
if (item.isFormField()) {
String value = item.getString("utf-8");
if("session_token".equals(name)){
sessionToken = value;
}
}else {
if("file".equals(name)){
file = item;
}
}
}
//session校驗(yàn)
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));
}
});
// 請(qǐng)求成功的場(chǎng)合
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);
}
}```