need:
Click the "Submit Application" button in the above figure to upload pictures, videos, and voices.
html
<!-- 上传图片 -->
<view class="Voice_input">
<text class="Voice_title">上传图片:</text>
<view class="Image_box">
<div class="box" v-for="(item,index) in totalImg" :key='index'>
//选择图片后回显的图片
<image :src="item" mode=""></image>
</div>
<div class="box" id='fileUploadBtn' @click="chooseImgs()" v-show="totalImg.length < 9">
//静态页面图片
<img class='upload_img' src="../../static/images/tupian.png" alt="">
</div>
</view>
</view>
css
/* 上传图片 */
.Voice_input{
border-bottom: 1px solid rgba(215,215,215,0.50);
}
.Voice_title{
height: 41px;
line-height: 41px;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #1F1F26;
}
.Image_box{
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 15px;
padding-bottom: 15px;
}
.box{
width: 108px;
height: 108px;
margin-right: 10px;
margin-bottom: 10px;
}
.box image{
width: 100%;
height: 100%;
}
js
This is just to display multiple pictures on the page, and does not call the interface given by the backend. Looking down, there will be an interface for uploading pictures
// 上传图片start
// 选择图片
chooseImgs:function(){
var _this = this
uni.chooseImage({
count:9,
sizeType:['original', 'compressed'],
sourceType: ['album'], //从相册选择
success:(res) => {
console.log("tempFilePaths")
console.log(res.tempFilePaths)
const tempFilePaths = res.tempFilePaths
for(var i=0;i<tempFilePaths.length;i++){
_this.totalImg.push(tempFilePaths[i]);
console.log("tempFilePaths" + tempFilePaths[i])
}
}
})
},
//图片预览
previewImage:function(e){
var _this = this
var index = e.currentTarget.dataset.index;
//所有图片
var imgbox = _this.totalImg;
wx.previewImage({
//当前显示图片
current: imgbox[index],
//所有图片
urls: imgbox
})
}
In this case, when the submit button is clicked, the backend returns an id number, which will be passed to the backend when uploading multiple pictures. The following code is the id res.data.content.idof uploading pictures, and PictureUploadthe function is a function for uploading multiple pictures , looking down is PictureUploadthe process of writing functions.
//提交申请按钮
submit(){
var that = this
if(that.totalImg !=''){
that.isHaveImage='1'
}
if(that.audioSrc !=''){
that.isHaveVoice='1'
}
if(that.videoSrc !=''){
that.isHaveVedio='1'
}
uni.request({
url: '提交申请的接口',
data: {
startTime:that.date + that.startTime,
endTime:that.date + that.endTime,
contacts:that.contacts,
phone: that.phone,
houseName:that.RepairAdess,
projectId:that.projectId,
content:that.content,
isHaveImage:that.isHaveImage,
isHaveVoice:that.isHaveVoice,
isHaveVedio:that.isHaveVedio,
isPrivate:that.isPrivate
},
method:'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Cookie': 'JSESSIONID=' + uni.getStorageSync('token')
},
dataType:'json',
success: (res) => {
console.log("提交成功")
console.log(res)
that.PictureUpload(res.data.content.id)
}
})
},
Multi-picture uploading can be realized by looping, totalImgwhich is an array storing multiple pictures. By looping this array, each picture is uploaded one by one to realize multi-picture uploading. category、typeThe value of is the parameter to be passed when uploading an image through the packet capture tool. These two values are written according to requirements, not fixed values
PictureUpload(id){
console.log("id")
var that = this
let tempFilePaths = that.totalImg
for(var i=0;i<tempFilePaths.length;i++){
// 上传图片
uni.uploadFile({
url:"后端给的，实现上传多张图片的接口",
method:"POST",
filePath:tempFilePaths[i],
name: 'imgs',
formData: {
imgs:tempFilePaths[i],
attachId:id,
category:'apply_repair',
type:'apply_repair',
},
header: {
"Content-Type": "multipart/form-data",
'Cookie': 'JSESSIONID=' + uni.getStorageSync('token')
},
dataType:'json',
success: function (res) {
console.log('图片上传成功')
console.log(res)
},
fail: function (res) {
}
})
}
}
Let’s get the result of packet capture for the packet capture tool
2. The same reason: the same is true for multi-video uploading
PictureUpload(id){
var that = this
// 上传视频
let videoSrcArr = that.videoSrc
for(var i = 0 ; i < videoSrcArr.length ; i ++){
uni.uploadFile({
url:"实现多视频上传的接口",
method:"POST",
filePath:videoSrcArr[i],
name: 'imgs',
formData: {
imgs:videoSrcArr[i],
attachId:id,
category:'apply_repair',
type:'apply_repair',
},
header: {
"Content-Type": "multipart/form-data",
'Cookie': 'JSESSIONID=' + uni.getStorageSync('token')
},
dataType:'json',
success: function (res) {
console.log('视频上传成功')
console.log(res)
},
fail: function (res) {
}
})
}
}
The voice upload here is the upload of a single voice
PictureUpload(id){
// 上传语音
uni.uploadFile({
url:"http://l.rymap.com:81/lxp/file/uploadListVoice.do",
method:"POST",
filePath:that.audioSrc,
name: 'imgs',
formData: {
imgs:that.audioSrc,
attachId:id,
category:'apply_repair',
type:'apply_repair',
},
header: {
"Content-Type": "multipart/form-data",
'Cookie': 'JSESSIONID=' + uni.getStorageSync('token')
},
dataType:'json',
success: function (res) {
console.log('语音上传成功')
console.log(res)
},
fail: function (res) {
}
})
}
Reference:
https://blog.csdn.net/mwh_user/article/details/108180029