微信小程序上传图片
//添加图片
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 许可协议。转载请注明出处!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构