图片上传问题，求哪位小哥哥小姐姐有时间了帮忙看一下我代码存在的问题，谢谢啦。 - WXOPEN Club

最近一个月都磕在了wx.uploadfile 上传图片上边。问同学同学也都没做过，找资料也一直找不到对症的。实在不知道问题出在哪了。希望哪位小哥哥小姐姐有空的话帮忙给看看，讲一下我到底该怎么改，谢谢啦！

wxml代码

</view>

</view>

</view>

这段代码中，一直不是很明白 <view class=“img” wx:for=“{{imgs}}” wx:for-item=“item” wx:key=“*this”> 这一句的详细意思。

wxss代码

.photo{justify-content: flex-start;}

.upload-img-btn{line-height: 30px;margin-left: 0px;margin-top: 10px}

.delete-btn{line-height: 30px;margin-left: 0px;margin-top: 0px}

.img-v{display: flex;flex-flow: row ;margin-top: 10px;}

.img-s{width:150rpx;height:150rpx;margin-left: 5px}

js代码

chooseImg: function (e) {

var that = this;

var imgs = this.data.imgs;

if (imgs.length >= 4) {

this.setData({

lenMore: 1

});

setTimeout(function () {

that.setData({

lenMore: 0

});

}, 2500);

return false;

}

wx.chooseImage({

// count: 1, // 默认9

sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图，默认二者都有

sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机，默认二者都有

success: function (res) {

// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

var tempFilePaths = res.tempFilePaths;

var imgs = that.data.imgs;

// console.log(tempFilePaths + ‘----’);

for (var i = 0; i < tempFilePaths.length; i++) {

if (imgs.length >= 4) {

that.setData({

imgs: imgs

});

return false;

} else {

imgs.push(tempFilePaths[i]);

}

// console.log(imgs);

that.setData({

imgs: imgs

});

//console.info(res.tempFilePaths.length);

// that.uploadFile(tempFilePaths, 0);

wx.uploadFile({

url: ‘http://localhost:8080/spongecity/upload/picture’,

filePath: tempFilePaths[0],

name: ‘*this’,

method: ‘POST’,

header: { “Content-Type”: “multipart/form-data” },

formData:{

success: function (res) {

console.log(res)

console.log(imgs[0])

fail: function (res) {

console.log(res);

}

})

}

});

// // 删除图片

deleteImg: function (e) {

var imgs = this.data.imgs;

var index = e.currentTarget.dataset.index;

imgs.splice(index, 1);

this.setData({

imgs: imgs

});

// 预览图片

previewImg: function (e) {

//获取当前图片的下标

var index = e.currentTarget.dataset.index;

//所有图片

var imgs = this.data.imgs;

wx.previewImage({

//当前显示图片

current: imgs[index],

//所有图片

urls: imgs

})

这段代码是我参考了许多代码后可以说是拼凑起来的，有的地方也不是很明白，比如 name: ’ ',里边我应该写什么，我知道他是文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容，但是不明白这具体是什么，和wxml代码里边有没有什么关联。还有formdata{ }里边应该怎么写，这段代码中的URL因为我没有配置域名，所以勾选的不校验合法域名。

下边是我的后端代码，JAVA语言，myeclipse编译器

package image;

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 GetImage 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();

}

下边是web.xml的代码

<?xml version=“1.0” encoding=“UTF-8”?>

<web-app xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xmlns=“http://java.sun.com/xml/ns/javaee” xsi:schemaLocation=“http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app\_3\_0.xsd” id=“WebApp_ID” version=“3.0”>

<display-name>spongecity</display-name>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.htm</welcome-file>

<welcome-file>default.jsp</welcome-file>

</welcome-file-list>

<servlet-name>GetImage</servlet-name>

<servlet-class>image.GetImage</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>GetImage</servlet-name>

<url-pattern>/GetImage</url-pattern>

</servlet-mapping>

这是开发者工具这边返回的截图：

里边的data“ ” 始终是空的。后台也一直没法获取图片。调试期间还遇到过code：500.，404, 405 等等错误。

这是我图片提交这边的所有代码了，我实在不知道该怎么解决了，希望哪位小哥哥，小姐姐帮忙给看一下，讲一下我该怎么改。不胜感激！！