小程序图片、视频上传

最新推荐文章于 2024-01-13 20:46:11 发布

panlxiang

最新推荐文章于 2024-01-13 20:46:11 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/panlxiang/article/details/85156358

版权

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

wxml页面代码

<form bindsubmit="onSave">
<textarea class='opinion opinion_text' name="opinion" placeholder="输入您要发送的内容" bindinput='comment' />

</view>
<view class="section tc vedioinfo" wx:if="{{src!=''}}">
<video src="{{src}}" controls class='vedios'></video>

</view>
</view>

<view class='view_bottom'>
<view class='section-line'></view>
<view class='view_bottom_btn'>
<button class="quiz-btn submit-btn" formType="submit" bindtap='addcompretent'>确定</button>
<button class='quiz-btn cancel-btn' bindtap='canceladd'>取消</button>
</view>
</view>

</form>

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"

// 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({

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,

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"

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;

}