首先是,选择图片预览删除的wxml文件
<view class='top-selected_1'>
<view class="cross_column">
<view class="cross_column">
<block wx:for="{{images}}" wx:key="*this">
<view>
<!-- 图片缩略图 -->
<image class="imgcls_4" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="ImagePreview"></image>
<!-- 移除图片的按钮 -->
<view style=" text-align: center;" data-idx="{{index}}" bindtap="removeImage">删除</view>
</view>
</block>
</view>
<image class="imgcls_4" bindtap="chooseImg" wx:if="{{images.length < 4}}" src="../image/add.png"></image>
</view>
</view>
.js文件,注意这里要引用.util文件
链接:https://pan.baidu.com/s/1ytn5aZDqs4MYs1cV1C7hAg
提取码:k7r3
import {
$init,
$digest
} from '../../utils/common.util'
Page({
images: []
},
//上传图片
chooseImg: function(e) {
var that = this;
var images = that.data.images;
//wx.chooseImage函数就是用来访问手机相册或摄像头的。
wx.chooseImage({
sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
success: res => {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
for (var i = 0; i < tempFilePaths.length; i++) images.push(tempFilePaths[i]);
// 限制最多只能留下4张照片
this.data.images = images.length <= 4 ? images : images.slice(0, 4)
console.log(images);
$digest(this) //等同于this.setData
}
});
},
//移除图片
removeImage(e) {
const idx = e.target.dataset.idx
this.data.images.splice(idx, 1) //删除idx后一张图片
$digest(this)
},
//图片预览
ImagePreview(e) {
const idx = e.target.dataset.idx
const images = this.data.images
//wx.previewImage预览图片的函数,可以对预览图片进行左右滑动
wx.previewImage({
current: images[idx], //当前预览的图片
urls: images, //所有要预览的图片
})
},
onLoad: function(options) {
$init(this);
}
})
添加上传图片的按钮
<button bindtap='chooseImageTap'>上传图片</button>
js方法的编写
//添加上传图片
chooseImageTap: function() {
var that = this;
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
itemColor: "#00000",
success: function(res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
that.chooseWxImage('album')
} else if (res.tapIndex == 1) {
that.chooseWxImage('camera')
}
}
}
})
},
// 图片本地路径
chooseWxImage: function(type) {
var that = this;
var imgsPaths = that.data.imgs;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function(res) {
console.log(res.tempFilePaths[0]);
that.upImgs(res.tempFilePaths[0], 0) //调用上传方法
}
})
},
//上传服务器
upImgs: function(imgurl, index) {
var that = this;
wx.uploadFile({
url: '*******************/Upload', //你接口的地址
filePath: imgurl,
name: 'file',
header: {
'content-type': 'appication/x-www-form-urlencoded'
},
formData: null,
success: function(res) {
console.log(res.data)
}
})
},
后台接口代码,根据自己的本地存储地址修改相应的代码
/// <summary>
/// 小程序图片上传
/// </summary>
[WebMethod(EnableSession = true)]
public void Upload()
{
//获取文件路径
HttpFileCollection files = HttpContext.Current.Request.Files;
//返回的对象初始化
object obj = null;
//获取项目路径
string sPath = System.Web.HttpContext.Current.Request.PhysicalPath;
//得到上一级路径
DirectoryInfo di = new DirectoryInfo(string.Format(@"{0}..\..\", sPath));
string sFilePath = Path.Combine(di.FullName, "Upload", DateTime.Today.Year.ToString(), DateTime.Today.Month.ToString(), DateTime.Today.Day.ToString(), "");
//不存在路径则创建该路径
if (!Directory.Exists(sFilePath))
{
Directory.CreateDirectory(sFilePath);
}
foreach (string key in files.AllKeys)
{
HttpPostedFile file = files[key];//file.ContentLength文件长度
if (string.IsNullOrEmpty(file.FileName) == false)
{
string fileName = Path.GetFileName(file.FileName);// 原始文件名称
string fileExtension = Path.GetExtension(fileName); // 文件扩展名
string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称
string fileSaveAsName = string.Format(@"{0}\{1}", sFilePath, saveName);//保存文件路径
file.SaveAs(fileSaveAsName);//保存
string sUrl = Path.Combine("Upload", DateTime.Today.Year.ToString(), DateTime.Today.Month.ToString(), DateTime.Today.Day.ToString(), saveName);//Url地址
obj = (new { resultCode = "001", FileName = saveName, Url = "http://localhost:14146/" + sUrl });
}
else obj = (new { resultCode = "003", Message = "请选择要上传的文件!" });
}
HttpContext.Current.Response.Write(obj);
}