最近一个月都磕在了wx.uploadfile 上传图片上边。问同学同学也都没做过,找资料也一直找不到对症的。实在不知道问题出在哪了。希望哪位小哥哥小姐姐有空的话帮忙给看看,讲一下我到底该怎么改,谢谢啦!
wxml代码
<view class='photo'>
<view class='photo-up'>
<button class="upload-img-btn"type='primary' bindtap="chooseImg" >选择图片</button>
</view>
<view class="img-v">
<view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image class='img-s' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
</view>
</view>
<button class="delete-btn" data-index="{{index}}" type='primary' catchtap="deleteImg">删除图片</button>
</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>
<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 等等错误。
这是我图片提交这边的所有代码了,我实在不知道该怎么解决了,希望哪位小哥哥,小姐姐帮忙给看一下,讲一下我该怎么改。不胜感激!!
小程序是前后端分离的
url 需要后台绑定的域名
为域名安装下https
name属性 可以随便取个名字 跟wxml没有关系,是为后台接受而设置的一个name
你好,我还有个困惑,因为我的后台是本地上用JAVA开发的,而且起步的时候没有配置域名服务器,直接下载的开发者工具,申请ID后就开始写代码,也正是如此我url不知道该写什么域名,才写的localhost,然后在开发者工具里边勾选了不校验域名和HTTPS证书。所以我想问一下服务器配置,域名申请备案,证书安装,这些都必须在写代码之前完成吗?
你在本地开发调试使用本地的代码,url写成localhost也能跑通,但是你这样上不了线的,上线之前你把那些问题得解决了
是啊,不过现在在本地都弄不通,心累
楼主可以试试ngrok
另外你这个链接。。。。。是访问不到的
上传图片挺简单得,先这样,然后这样,再那样 ,就可以了
对的就是这样!满昏满昏(手动滑稽)!
没错 就是这样 先这样在那样 就可以了
那段代码 是上传图片后 展示出来。可以叠加上传多张
昨天不是上线了个云开发
暂时还不会用,先看一看
后台用的java的话,你的 url 是指向后台的 action 或者controller 吗
controller,我也没用什么架构,就是简单在网上找的代码,改了下