微信小程序上传图片很简单：

//点击选择图片选择图片：函数(){var即=thisWx.chooseImage({ count: 9，//默认9size type3360 ['original '，' compressed']，//可以指定是原始图像还是压缩图像，默认两者都有source type3360 ['album '，' camera']。//可以指定来源是相册还是相机。默认情况下，两者都有success :函数(RES){ that . setdata({ tempfile path : that . data . tempfile path . concat(RES . tempfile path)//在现有基础上拼接})})，在这里的setData中，当您选择照片并再次启动该功能时，您将添加照片而不是覆盖它们。如果你感兴趣，可以看看concat的意思。

在这里，照片被选中，并可以显示在界面上

image class=' icon-image ' background-size=' contain ' wx : for=' { { tempfile path } } ' src=' { { item } } ' data-id=' { { index } } ' bind tap=' delete '/图像渲染：

然后就是上传多张图片的过程，这里我把它上传到公司oss，源代码：

upload : function(){ for(var I=0；I this . data . tempfilepath . length；I){//console . log(' 000 ')this . upload _ file(this . data . tempfile path[I])} }，upload_file:函数(file path){ var=this；wx . uploadfile({ URL : ' https://* * * * * * * * * * * * * * * * * * * */imgs }，header : { ' content-type ' : ' multipart/form-data ' }，filePath: filepath，name: 'file '，formdata : { file 3: file path }，success : function(RES){ that . setdata({ mes 3360 JSON . parse(RES)。

但是当我点击提交时，图片会是空的，因为我们必须先在提交的事件中写好上传图片的方法。

放手是提交方法，但由于微信小程序是异步的，在执行for循环之前触发提交事件，导致图片为空。

我搜索了很多答案，但是我一点也不理解，因为我没有很快接触到它们。我必须为自己找到一条路。我选择图片时上传了图片，然后返回到路径：

//点击选择图片选择图片：函数(){var即=thisWx.chooseImage({ count: 9，//默认9size type3360 ['original '，' compressed']，//可以指定是原始图像还是压缩图像，默认两者都有source type3360 ['album '，' camera']。//可以指定来源是相册还是相机。默认情况下，两者都有success :函数(RES){ that . setdata({ tempfile path 3360 that . data . tempfile path . concat(RES . tempfile path)//在现有基础上拼接})that . upload()；that . setdata({ temp : that.data.tempFilePaths.length//用来解决for循环比异步更快的问题})})})，upload : function(){ for(var I=this . data . temp；I this . data . tempfilepath . length；I) {//console.log ('000 ')这个。上传文件(这。data . tempfile path[I])} }，你会发现我添加了一个temp，这样就解决了问题，实现了上传，但是删除的时候，需要删除上传的，而不是只删除条集中的。

源代码：

//pages/comment/cmment。jsconst app=GetApp()Page({/* * *页面的初始数据*/data : { mes : }，content: ' '，tempfile path 3360[]，userInfo: {}，hasUserInfo: false，可以使用： wx。可以使用('按钮。开放式。getuserinfo ')，images:[]，temp:0，infoId: ' '，sendtype:'' }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){控制台。日志(选项。infoID ' infoID ')这个。setdata({ infoID :选项。infoID，发送类型：选项。发送类型})}，/** *页面上拉触底事件的处理函数*/OnReachBottom :函数(){ }，确认提交：函数(e){控制台。日志(例如详细信息。value)}，//点击选择图片chooseimage :函数(){ var=thiswx.chooseImage({ count: 9，//默认9尺寸类型： ['原始','压缩'],//可以指定是原图还是压缩图，默认二者都有sourceType: ['相册','相机'],//可以指定来源是相册还是相机，默认二者都有成功：函数{那个。setdata({ tempfilepath 3360。数据。tempfilepath。concat(RES . tempfilepath)//在已有的基础上进行拼接})即。上传()；那个。setdata({ temp : that.data.tempFilePaths.length//用来解决为循环比异步快}) } }) }, //点击删除图片删除：函数{ var index=e . CurrentTarget。数据集。id；这个。数据。临时文件路径。拼接(索引，1) //渲染数据这个。setdata({ tempfilepath 3360 this。数据。tempfilepath })}，//提交评论formbindbitsubmit :函数(e){//控制台。日志(这个。数据。图像。长度' * * * * * '；//for(var I=0；我喜欢这个。数据。图像。长度；I){//控制台。日志(这个。数据。图像[I])；//}控制台。日志(这个。数据。信息标识'信息标识不能用？')wx。请求({ URL : ' https://* * * * */save comments '，method: 'POST '，标头： { ' content-type ' : ' application/JSON '，' user-token': 'OXJ*****，//usertoken }，数据： { relevantid : this。数据。infoid，type: 1，//this.data.type，content:e.detail .提示，content: '评论成功，})返回；} else { wx.showModal({ title: '提示，content: '评论失败，})})))//wx。navigateto({//URL : './文章/文章？id=' this。数据。infoid/})}，上传：函数(){ for(var I=this。数据。温度；我喜欢这个。数据。tempfilepath。长度；I){//控制台。记录(' 000 ')这个。上传文件(这。数据。tempfile路径[I])} }，upload_file:函数(文件路径){ var=thiswx。upload file({ URL : ' https://* * * * * * */文件上传器/上传器/imgs '，标头： { ' content-type ' : ' multipart/form-data ' }，filePath: filepath，name: 'file '，form data : { file 3: file path }，success 3360 function(RES){即。setdata({ mes 3360 JSON .把字符串解析成对象})//控制台。记录(那个。数据。梅斯。数据。文件路径)//控制台。记录(那个。数据。图像。长度' * * * * * * * * * * *)//wx。show toast({//title : ' success '，//}) }，fail : function(RES){ wx。显示吐司({ title : '图片加载失败', }) } }) }})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。