微信小程序上传图片
//添加图片
joinPicture: function (e) {
var index = e.currentTarget.dataset.index;
var evalList = this.data.evalList;
var that = this;
var imgNumber = evalList[index].tempFilePaths;
if (imgNumber.length >= 3) {
wx.showModal({
title: '',
content: '最多上传三张图片',
showCancel: false,
})
return;
}
wx.showActionSheet({
itemList: ["从相册中选择", "拍照"],
itemColor: "#f7982a",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
that.chooseWxImage("album", imgNumber);
} else if (res.tapIndex == 1) {
that.chooseWxImage("camera", imgNumber);
}
}
}
})
},
chooseWxImage: function (type, list) {
var img = list;
var len = img.length;
var that = this;
var evalList = this.data.evalList;
wx.chooseImage({
count: 3,
sizeType: ["original", "compressed"],
sourceType: [type],
success: function (res) {
var addImg = res.tempFilePaths;
var addLen = addImg.length;
if ((len + addLen) > 3) {
for (var i = 0; i < (addLen - len); i++) {
var str = {};
str.pic = addImg[i];
img.push(str);
}
} else {
for (var j = 0; j < addLen; j++) {
var str = {};
str.pic = addImg[j];
img.push(str);
}
}
that.setData({
evalList: evalList
})
that.upLoadImg(img);
},
})
},
upLoadImg: function (list) {
var that = this;
this.upload(that, list);
},
//多张图片上传
upload: function (page, path) {
var that = this;
var curImgList = [];
for (var i = 0; i < path.length; i++) {
wx.showToast({
icon: "loading",
title: "正在上传"
}),
wx.uploadFile({
url: app.globalData.subDomain + '/API/AppletApi.aspx',//接口处理在下面有写
filePath: path[i].pic,
name: 'file',
header: { "Content-Type": "multipart/form-data" },
formData: {
douploadpic: '1'
},
success: function (res) {
curImgList.push(res.data);
var evalList = that.data.evalList;
evalList[0].imgList = curImgList;
that.setData({
evalList: evalList
})
if (res.statusCode != 200) {
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
return;
}
var data = res.data
page.setData({ //上传成功修改显示头像
src: path[0]
})
},
fail: function (e) {
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
},
complete: function () {
wx.hideToast(); //隐藏Toast
}
})
}
},
//删除图片
clearImg: function (e) {
var index = e.currentTarget.dataset.index;
var evalList = this.data.evalList;
var img = evalList[0].tempFilePaths;
img.splice(index, 1);
this.setData({
evalList: evalList
})
this.upLoadImg(img);
},
data: {
productInfo: {}
},
//上传图片
uploadImage: function () {
var that = this;
wx.chooseImage({
count: 1, //最多可以选择的图片总数
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
//启动上传等待中...
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 10000
})
wx.uploadFile({
url: '192.168.1.1/home/uploadfilenew',
filePath: tempFilePaths[0],
name: 'uploadfile_ant',
formData: {
},
header: {
"Content-Type": "multipart/form-data"
},
success: function (res) {
var data = JSON.parse(res.data);
//服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
console.log(data);
},
fail: function (res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function (res) { }
})
}
});
}
});
}
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!