标签：index string 微信 data var imgs WebSercice 入坑 图片
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();
}
可上传多张到服务器
提交可将获取到的服务器图片名数组保存到表，再根据服务器域名+表中存入的图片名显示图片
标签：index,string,微信,data,var,imgs,WebSercice,入坑,图片 来源： https://www.cnblogs.com/jstblog/p/15321014.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。