1.

第一次写小程序项目时遇到的多张图片上传问题，小程序api上传upload一次只能传一张，以及视频的上传。附上代码

wxml页面代码2.

!--pages/user/quiz/quiz.wxml--formbindsubmit"onSave"textareaclass'opinionopinion_text'name"opinion"placeholder"输入您要发送的内容"bindinput'comment'/

3.

viewclass"content"!--imageclass"microphone"src"/images/microphone.png"/image--viewclass"imgcontainer"imagebindtap'urlchoose'class"picture"src"/images/add2.png"/image/view

4.

viewclass'up_imgs'viewclass"img"wx:for"{{imgs}}"wx:for-item"item"wx:key"*this"imagesrc"{{item}}"data-index"{{index}}"mode"aspectFill"bindtap"previewImg"class'upload_imgs'/imageviewclass"delete-btn"data-index"{{index}}"catchtap"deleteImg"!--imagesrc'/images/rubbish@3x.png'/image--textX/text/view/view

5.

/viewviewclass"sectiontcvedioinfo"wx:if"{{src!''}}"videosrc"{{src}}"controlsclass'vedios'/video!--viewcatchtap'deletevideo'class"delete-btn2"text删除/textimagesrc'/images/rubbish@3x.png'/image/view--/view/viewviewclass'view_bottom'viewclass'section-line'/viewviewclass'view_bottom_btn'buttonclass"quiz-btnsubmit-btn"formType"submit"bindtap'addcompretent'确定/buttonbuttonclass'quiz-btncancel-btn'bindtap'canceladd'取消/button/view/view/form

js代码6.

//pages/course/addNewArticle/addNewArticle.js

7.

import{String}from"../../utils/util.js";

8.

varimg srcnewArray();

9.

varvediosrc"";

10.

varcomment;

11.

varids;

12.

varvideo"";

13.

varuploadimgnewArray();

14.

varkeys0;

15.

varUtilrequire("../../utils/util.js");

16.

varapirequire("../../api.js"),

17.

appgetApp();

18.

Page({

19.

/**

20.

*页面的初始数据

21.

*/

22.

onReady:function(res){

23.

this.videoContextwx.createVideoContext("myVideo");

24.

},

25.

inputValue:"",

26.

data:{

27.

tempFilePaths:[],

28.

imgs:[],

29.

bool:false,

30.

src:""

31.

},

32.

uploadimage(filePaths,successUp,failUp,i,length){

33.

varthatthis;

34.

wx.uploadFile({

35.

url:api.audio.upload,//后台给的接口

36.

header:{

37.

//请求头和ajax写法一样

38.

"content-type":"multipart/form-data"

39.

},

40.

filePath:filePaths[i],

41.

formData:{

42.

uploadCat:"img"

43.

},

44.

name:"upload",

45.

//success:(resp){

46.

//successUp++;

47.

//},

48.

fail:res{

49.

failUp++;

50.

},

51.

success:function(res){

52.

successUp++;

53.

console.log(res.data);

54.

vardatasJSON.parse(res.data);

55.

uploadimg.push(datas.results);

56.

console.log("333333333");

57.

console.log(uploadimg);

58.

},

59.

fail:function(res){

60.

console.log(res.data);

61.

}

62.

});

63.

},

64.

urlchoose:function(){

65.

varthatthis;

66.

//console.log(that)

67.

wx.showActionSheet({//模态框选择

68.

itemList:["选择图片","选择视频"],

69.

success:function(res){

70.

console.log(res.tapIndex);

71.

if(res.tapIndex0){

72.

wx.chooseImage({

73.

count:9,//设置最多九张

74.

sizeType:["original","compressed"],

75.

sourceType:["album","camera"],

76.

success(res){

77.

keys0;

78.

varsuccessUp0;//成功个数

79.

varfailUp0;//失败个数

80.

varlengthres.tempFilePaths.length;//总共个数

81.

vari0;//第几个

82.

//vartempFilePathsres.tempFilePaths;

83.

for(vari0;ires.tempFilePaths.length;i++){

84.

img src.push(res.tempFilePaths[i]);

85.

that.uploadimage(

86.

res.tempFilePaths,

87.

successUp,

88.

failUp,

89.

i,

90.

length

91.

);

92.

}

93.

console.log(img src);

94.

//that.data.imgsimg src;

95.

that.setData({

96.

imgs:img src

97.

});

98.

console.log("图片"+img src[0]);

99.

}

100.

});

101.

}elseif(res.tapIndex1){

102.

//选择视频

103.

wx.chooseVideo({

104.

sourceType:["album","camera"],

105.

//maxDuration:60,

106.

size:20,

107.

camera:["front","back"],

108.

success:function(res){

109.

keys1;

110.

src:res.tempFilePath;

111.

bool:true,(vediosrcres.tempFilePath);

112.

that.setData({

113.

src:vediosrc

114.

});

115.

wx.uploadFile({//开始上传

116.

url:api.audio.upload,//接口地址

117.

header:{

118.

//请求头和ajax写法一样

119.

"content-type":"multipart/form-data"

120.

},

121.

filePath:vediosrc,

122.

formData:{

123.

uploadCat:"video"

124.

},

125.

name:"upload",

126.

success:function(res){

127.

console.log(res.data);

128.

console.log("hahahahhahhahahah");

129.

varvideosJSON.parse(res.data);

130.

videovideos.results;

131.

console.log(video);

132.

},

133.

fail:function(res){

134.

console.log(res.data);

135.

}

136.

});

137.

//console.log(res.tempFilePath)

138.

}

139.

});

140.

console.log(vediosrc);

141.

//that.setData({

142.

//src:vediosrc,

143.

//})

144.

}

145.

},

146.

fail:function(res){

147.

console.log(res.errMsg);

148.

}

149.

});

150.

},

151.

//删除图片

152.

deleteImg:function(e){

153.

varimgsthis.data.imgs;

154.

varindexe.currentTarget.dataset.index;

155.

img src.splice(index,1);

156.

this.setData({

157.

imgs:img src

158.

});

159.

},

160.

//预览图片

161.

previewImg:function(e){

162.

//获取当前图片的下标

163.

varindexe.currentTarget.dataset.index;

164.

//所有图片

165.

varimgsthis.data.imgs;

166.

wx.previewImage({

167.

//当前显示图片

168.

current:imgs[index],

169.

//所有图片

170.

urls:imgs

171.

});

172.

},

173.

/**

174.

*生命周期函数--监听页面加载

175.

*/

176.

onLoad:function(options){

177.

idsoptions.id;

178.

console.log(ids);

179.

},

180.

/**

181.

*生命周期函数--监听页面初次渲染完成

182.

*/

183.

onReady:function(){},

184.

/**

185.

*生命周期函数--监听页面显示

186.

*/

187.

onShow:function(){

188.

//this.urlchoose();

189.

if(vediosrc!null){

190.

bool:true;

191.

}

192.

},

193.

/**

194.

*生命周期函数--监听页面隐藏

195.

*/

196.

onHide:function(){},

197.

/**

198.

*生命周期函数--监听页面卸载

199.

*/

200.

onUnload:function(){

201.

//wx.reLaunch({

202.

//url:'../audiodetail/audiodetail?id'+ids

203.

//})

204.

},

205.

/**

206.

*页面相关事件处理函数--监听用户下拉动作

207.

*/

208.

onPullDownRefresh:function(){},

209.

/**

210.

*页面上拉触底事件的处理函数

211.

*/

212.

onReachBottom:function(){},

213.

/**

214.

*用户点击右上角分享

215.

*/

216.

onShareAppMessage:function(){},

217.

comment:function(e){

218.

//获取input输入的值

219.

varthatthis;

220.

that.setData({

221.

comment:e.detail.value

222.

});

223.

commentthat.data.comment;

224.

console.log(comment);

225.

},

226.

//发布感悟

227.

addcompretent:function(){

228.

console.log("图片2222"+uploadimg);

229.

console.log(video);

230.

console.log(img src+"图片路径333333");

231.

//console.log('1111eeeeeeeeee')

232.

if(commentnull){

233.

wx.showModal({

234.

title:"提示",

235.

content:"感悟内容不能为空"

236.

});

237.

}else{

238.

console.log(vediosrc);

239.

console.log(uploadimg);

240.

console.log("ppppppppppp");

241.

if(keys0){

242.

console.log(img src+"图片路径333333");

243.

console.log(uploadimg);

244.

varuserapp.globalData.userInfo.id;

245.

//varuser'6846990'

246.

console.log("22222222222222ee");

247.

wx.request({

248.

url:

249.

api.audio.addcompretents+

250.

"?userId"+

251.

user+

252.

"videoId"+

253.

ids+

254.

"content"+

255.

comment+

256.

"img"+

257.

uploadimg+

258.

"uploadCatimg",

259.

success:function(res){

260.

if(res.data.code200){

261.

(img src[]),(uploadimg[]);

262.

wx.showModal({

263.

title:"提示",

264.

content:"发布成功",

265.

success:function(res){

266.

if(res.confirm){

267.

wx.navigateTo({

268.

url:

269.

"../../pages/studentcompretent/studentcompretent?id"+

270.

ids

271.

});

272.

}

273.

}

274.

});

275.

}

276.

}

277.

});

278.

}elseif(!String.isBlank(video)){

279.

console.log(video);

280.

//console.log('3333333333eeee')

281.

varuserapp.globalData.userInfo.id;

282.

//varuser'6846990'

283.

console.log(user+""+ids+""+comment+""+video);

284.

console.log("上传文件信息:"+video);

285.

wx.request({

286.

url:

287.

api.audio.addcompretents+

288.

"?userId"+

289.

user+

290.

"videoId"+

291.

ids+

292.

"content"+

293.

comment+

294.

"img"+

295.

video+

296.

"uploadCatvideo",

297.

success:function(res){

298.

if(res.data.code200){

299.

wx.showModal({

300.

title:"提示",

301.

content:"发布成功",

302.

success:function(res){

303.

if(res.confirm){

304.

wx.navigateTo({

305.

url:

306.

"../../pages/studentcompretent/studentcompretent?id"+

307.

ids

308.

});

309.

console.log(ids);

310.

}

311.

}

312.

});

313.

//video""

314.

}

315.

}

316.

});

317.

}

318.

}

319.

},

320.

canceladd:function(){

321.

wx.navigateBack({});

322.

}

323.

});

样式wxss324.

/*pages/user/quiz/quiz.wxss*/

325.

page{font-size:30rpx;}.opinion_text{padding:10px;}.content{padding:10rpx20rpx;background:#ffffff;position:relative;min-height:400rpx;}.content.picture{width:100rpx;height:100rpx;position:absolute;top:40rpx;left:58rpx;z-index:999;}.plus{width:100rpx;height:100rpx;box-sizing:border-box;margin:20rpx;}.imgcontainer{width:160rpx;height:160rpx;border:1pxsolid#eee;margin-left:3px;}.img{margin-right:22rpx;display:inline-block;position:relative;}.delete-btn{width:30rpx;height:30rpx;border-radius:50%;border:1rpxsolid#eee;background-color:#cd5c5c;position:absolute;right:5rpx;top:35rpx;color:#eee;z-index:100;}.delete-btntext{position:absolute;right:6rpx;top:-3rpx;font-size:25rpx;font-weight:bold;}

326.

.up_imgs{width:705rpx;margin:0auto;}.upload_imgs{margin-top:30rpx;width:210rpx;height:210rpx;}

327.

.vedioinfo{width:658rpx;margin:0auto;margin-top:30rpx;}.vedios{height:300rpx;width:300rpx;margin-left:-20rpx;/*position:relative;*/}.delete-btn2{width:300rpx;height:30rpx;/*margin-top:320rpx;margin-left:150rpx;*/text-align:center;}.delete-btn2text{font-size:30rpx;color:#aaa;}

328.

.view_bottom{width:750rpx;height:40rpx;background-color:white;position:absolute;bottom:0;}

329.

.view_bottom_btn{display:flex;margin-bottom:8px;}

330.

.quiz-btn{width:350rpx;height:82rpx;border-radius:36rpx;font-size:32rpx;color:white;font-family:PingFang-SC-Bold;line-height:72rpx;}

331.

.submit-btn{background:rgba(233,147,38,1);}

332.

.cancel-btn{background:rgba(178,178,178,1);}

333.

.opinion{width:658rpx;height:250rpx;background:rgba(244,244,244,1);border-radius:6rpx;margin:24rpxauto;}

334.

.section-line{/*分界线*/width:750rpx;height:2rpx;background:rgba(208,208,208,1);margin-bottom:15rpx;}