需求：
通过上图中点击”提交申请按钮，实现图片、视频、语音的上传。
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
这里只是实现了将多张图片显示在页面上，并没有调用后端给的接口，往下看会有调上传图片的接口
// 上传图片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
})
}
此案例中当点击提交按钮时，后端返回一个id号，此id号在做多图片上传的时候会传给后端，一下代码中res.data.content.id就是做上传图片的id，PictureUpload函数是做多图片上传的函数，在往下看是书写PictureUpload函数的过程。
//提交申请按钮
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)
}
})
},
通过循环可以实现多图片上传，totalImg是存储多张图片的数组，通过循环这个数组，将每一张图片一张一张的上传，即可实现多图片上传。category、type的值是通过抓包工具查看可知在做图片上传是要传的参数。这两个值是根据需求写的，不是固定值
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) {
}
})
}
}
一下为抓包工具抓包得到得结果
2、同理：实现多视频上传也是这样
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) {
}
})
}
}
这里的语音上传是单个语音的上传
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) {
}
})
}
参考：
https://blog.csdn.net/mwh_user/article/details/108180029