wxml文件
<view class="weui-uploader">
<view class="img-v weui-uploader__bd">
<view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image class='weui-uploader__img'
src="{{urlimg}}{{item}}"
data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
<icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
</image>
</view>
<!-- 用来提示用户上传图片 -->
<view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view>
</view>
<button class="upload-img-btn" bindtap="chooseImg" type='primary' style="background-color:#ffcb63;">拍照 / 上传</button>
</view>
CSS文件
.img{
display: inline-block;
}
.pic {
float:left;
position:relative;
margin-right:9px;
margin-bottom:9px;
}
.delete-btn{
position: absolute;
top: 0;
right: 0;
}
.weui-uploader{
padding: 10rpx;
}
.lineHeight {
width: 100%;
line-height: 80rpx;
border-bottom: 1px solid #ccc;
font-size: 30rpx;
}
.container {
padding: 0;
align-items: left;
padding-left: 15rpx;
}
.numberInfo {
font-size: 24rpx;
text-indent: 15rpx;
border-bottom: 1px solid #ccc;
}
/* .input {
display: inline-block;
border: 1px solid #ccc;
line-height: 80rpx;
vertical-align: middle;
margin-left: 11%;
width: 75%;
} */
.input,
.input-7 ,
.input-15{
margin-left: 7%;
display: inline-block;
/* border: 1px solid #ccc; */
line-height: 80rpx;
vertical-align: middle;
width: 75%;
}
.input{
margin-left: 11%;
}
button {
width: 100%;
margin-top: 30rpx;
}
.select{
margin-left: 7%;
color: #666;
}
.input-15{
margin-left:15%;
}
JS文件——data自理
// 上传图片
chooseImg: function (e) {
var that = this;
var imgs = this.data.imgs;
if (imgs.length >= 9) {
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++) {
that.setData({
jstone:that.data.jstone+1,
})
var js=that.data.jstone;
if (imgs.length >= 9) {
that.setData({
imgs: imgs
});
that.upLoad(tempFilePaths[i],js);
return false;
} else {
that.upLoad(tempFilePaths[i],js);
imgs.push(tempFilePaths[i]);
}
}
// console.log(imgs);
that.setData({
imgs: imgs
});
console.log(that.data.imgsone);
}
});
},
upLoad(filePath,index){//上传图片到服务器
var url=app.globalData.url+"img_upload";
wx.showToast({
icon: "loading",
title: "正在上传"
}),
wx.uploadFile({
url: url, //服务器路径
filePath: filePath, //图片文件
name: 'file',
formData: null,
header: {
'content-type':'application/json'
},
success: res => {
// console.log(index);
this.setData({
['imgsone['+ index +']']:JSON.parse(res.data),
})
// console.log(JSON.parse(res.data));
// console.log(this.data.imgsone);
}
})
},
// 删除图片
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;
console.log(imgs);
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls:imgs
})
},
WebService接口文件
[WebMethod]//上传图片
public void img_upload()//接收图片
{
string result = string.Empty;//返回图片路径
string fileExtension;//文件扩展名
string shijian;//当前时间
string newname;//新文件名
string currentpath;//网站根目录
try
{
string path = "/UpLoadFilesimages/";
HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["file"]; //对应小程序 name
//获取文件
if (file != null)
{
Stream sr = file.InputStream; //文件流
Bitmap bitmap = (Bitmap)Bitmap.FromStream(sr);
//取得文件的扩展名,并转换成小写
fileExtension = System.IO.Path.GetExtension(file.FileName).ToLower();
//获取当前时间
//shijian = DateTime.Now.ToLocalTime().ToString("yyyyMMddhhssmm");
shijian = string.Format("{0}{1}", DateTime.Now.ToString("yyyyMMddHHmmss"), GetUniqueKey1());
//合成新产生的文件名
newname = shijian + fileExtension;
path += newname;
currentpath = System.Web.HttpContext.Current.Server.MapPath("~");
bitmap.Save(currentpath + path);
}
result = path;//返回图片路径
}
catch (Exception vErr)
{
result = vErr.Message;
}
Context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(result));
Context.Response.End();
}
public string GetUniqueKey1()
{
int maxSize = 8;
int minSize = 5;
char[] chars = new char[62];
string a;
a = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
chars = a.ToCharArray();
int size = maxSize;
byte[] data = new byte[1];
RNGCryptoServiceProvider crypto = new RNGCryptoServiceProvider();
crypto.GetNonZeroBytes(data);
size = maxSize;
data = new byte[size];
crypto.GetNonZeroBytes(data);
StringBuilder result = new StringBuilder(size);
foreach (byte b in data)
{
result.Append(chars[b % (chars.Length - 1)]);
}
return result.ToString();
}
可上传多张到服务器
提交可将获取到的服务器图片名数组保存到表，再根据服务器域名+表中存入的图片名显示图片