小程序图片、视频上传
第一次写小程序项目时遇到的多张图片上传问题，小程序api上传upload一次只能传一张，以及视频的上传。附上代码
wxml页面代码
js代码
// pages/course/addNewArticle/addNewArticle.js
import { String } from "../../utils/util.js";
var imgsrc = new Array();
var vediosrc = "";
var comment;
var ids;
var video = "";
var uploadimg = new Array();
var keys = 0;
var Util = require("../../utils/util.js");
var api = require("../../api.js"),
app = getApp();
Page({
/**
* 页面的初始数据
*/
onReady: function(res) {
this.videoContext = wx.createVideoContext("myVideo");
},
inputValue: "",
data: {
tempFilePaths: [],
imgs: [],
bool: false,
src: ""
},
uploadimage(filePaths, successUp, failUp, i, length) {
var that = this;
wx.uploadFile({
url: api.audio.upload,//后台给的接口
header: {
//请求头和ajax写法一样
"content-type": "multipart/form-data"
},
filePath: filePaths[i],
formData: {
uploadCat: "img"
},
name: "upload",
// success: (resp) => {
// successUp++;
// },
fail: res => {
failUp++;
},
success: function(res) {
successUp++;
console.log(res.data);
var datas = JSON.parse(res.data);
uploadimg.push(datas.results);
console.log("333333333");
console.log(uploadimg);
},
fail: function(res) {
console.log(res.data);
}
});
},
urlchoose: function() {
var that = this;
// console.log(that)
wx.showActionSheet({//模态框选择
itemList: ["选择图片", "选择视频"],
success: function(res) {
console.log(res.tapIndex);
if (res.tapIndex === 0) {
wx.chooseImage({
count: 9, // 设置最多九张
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success(res) {
keys = 0;
var successUp = 0; //成功个数
var failUp = 0; //失败个数
var length = res.tempFilePaths.length; //总共个数
var i = 0; //第几个
// var tempFilePaths = res.tempFilePaths;
for (var i = 0; i < res.tempFilePaths.length; i++) {
imgsrc.push(res.tempFilePaths[i]);
that.uploadimage(
res.tempFilePaths,
successUp,
failUp,
i,
length
);
}
console.log(imgsrc);
// that.data.imgs=imgsrc;
that.setData({
imgs: imgsrc
});
console.log("图片" + imgsrc[0]);
}
});
} else if (res.tapIndex === 1) {
// 选择视频
wx.chooseVideo({
sourceType: ["album", "camera"],
//maxDuration: 60,
size: 20,
camera: ["front", "back"],
success: function(res) {
keys = 1;
src: res.tempFilePath;
bool: true, (vediosrc = res.tempFilePath);
that.setData({
src: vediosrc
});
wx.uploadFile({//开始上传
url: api.audio.upload,//接口地址
header: {
//请求头和ajax写法一样
"content-type": "multipart/form-data"
},
filePath: vediosrc,
formData: {
uploadCat: "video"
},
name: "upload",
success: function(res) {
console.log(res.data);
console.log("hahahahhahhahahah");
var videos = JSON.parse(res.data);
video = videos.results;
console.log(video);
},
fail: function(res) {
console.log(res.data);
}
});
//console.log(res.tempFilePath)
}
});
console.log(vediosrc);
// that.setData({
// src: vediosrc,
// })
}
},
fail: function(res) {
console.log(res.errMsg);
}
});
},
// 删除图片
deleteImg: function(e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
imgsrc.splice(index, 1);
this.setData({
imgs: imgsrc
});
},
// 预览图片
previewImg: function(e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.imgs;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
ids = options.id;
console.log(ids);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
//this.urlchoose();
if (vediosrc != null) {
bool: true;
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
// wx.reLaunch({
// url: '../audiodetail/audiodetail?id='+ids
// })
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
comment: function(e) {
//获取input输入的值
var that = this;
that.setData({
comment: e.detail.value
});
comment = that.data.comment;
console.log(comment);
},
// 发布感悟
addcompretent: function() {
console.log("图片2222" + uploadimg);
console.log(video);
console.log(imgsrc + " 图片路径 333333 ");
//console.log('1111eeeeeeeeee')
if (comment == null) {
wx.showModal({
title: "提示",
content: "感悟内容不能为空"
});
} else {
console.log(vediosrc);
console.log(uploadimg);
console.log("ppppppppppp");
if (keys == 0) {
console.log(imgsrc + " 图片路径 333333 ");
console.log(uploadimg);
var user = app.globalData.userInfo.id;
//var user = '6846990'
console.log("22222222222222ee");
wx.request({
url:
api.audio.addcompretents +
"?userId=" +
user +
"&videoId=" +
ids +
"&content=" +
comment +
"&img=" +
uploadimg +
"&uploadCat=img",
success: function(res) {
if (res.data.code == 200) {
(imgsrc = []), (uploadimg = []);
wx.showModal({
title: "提示",
content: "发布成功",
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url:
"../../pages/studentcompretent/studentcompretent?id=" +
ids
});
}
}
});
}
}
});
} else if (!String.isBlank(video)) {
console.log(video);
// console.log('3333333333eeee')
var user = app.globalData.userInfo.id;
//var user = '6846990'
console.log(user + " " + ids + " " + comment + " " + video);
console.log("上传文件信息:" + video);
wx.request({
url:
api.audio.addcompretents +
"?userId=" +
user +
"&videoId=" +
ids +
"&content=" +
comment +
"&img=" +
video +
"&uploadCat=video",
success: function(res) {
if (res.data.code == 200) {
wx.showModal({
title: "提示",
content: "发布成功",
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url:
"../../pages/studentcompretent/studentcompretent?id=" +
ids
});
console.log(ids);
}
}
});
//video=""
}
}
});
}
}
},
canceladd: function() {
wx.navigateBack({});
}
});
样式wxss
/* pages/user/quiz/quiz.wxss */
page {
font-size: 30rpx;
}
.opinion_text{
padding: 10px;
}
.content{
padding: 10rpx 20rpx;
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: 1px solid #eee;
margin-left: 3px;
}
.img{
margin-right: 22rpx;
display: inline-block;
position: relative;
}
.delete-btn{
width: 30rpx;
height: 30rpx;
border-radius: 50%;
border: 1rpx solid #eee;
background-color: #cd5c5c;
position: absolute;
right: 5rpx;
top: 35rpx;
color: #eee;
z-index: 100;
}
.delete-btn text{
position: absolute;
right: 6rpx;
top: -3rpx;
font-size: 25rpx;
font-weight: bold;
}
.up_imgs{
width: 705rpx;
margin: 0 auto;
}
.upload_imgs{
margin-top: 30rpx;
width: 210rpx;
height: 210rpx;
}
.vedioinfo{
width: 658rpx;
margin: 0 auto;
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-btn2 text{
font-size: 30rpx;
color: #aaa;
}
.view_bottom {
width: 750rpx;
height: 40rpx;
background-color: white;
position: absolute;
bottom: 0;
}
.view_bottom_btn {
display: flex;
margin-bottom: 8px;
}
.quiz-btn {
width: 350rpx;
height: 82rpx;
border-radius: 36rpx;
font-size: 32rpx;
color: white;
font-family: PingFang-SC-Bold;
line-height: 72rpx;
}
.submit-btn {
background: rgba(233, 147, 38, 1);
}
.cancel-btn {
background: rgba(178, 178, 178, 1);
}
.opinion {
width: 658rpx;
height: 250rpx;
background: rgba(244, 244, 244, 1);
border-radius: 6rpx;
margin: 24rpx auto;
}
.section-line {
/* 分界线 */
width: 750rpx;
height: 2rpx;
background: rgba(208, 208, 208, 1);
margin-bottom: 15rpx;
}