必要：
上図の「応募する」ボタンをクリックして、写真、動画、音声をアップロードします。
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関数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複数の画像を格納した配列をループすることで実現でき、この配列をループさせることで画像を1枚ずつアップロードすることでマルチ画像アップロードを実現します。category、typeの値は、パケット キャプチャ ツールを通じて画像をアップロードするときに渡されるパラメーターです。これら 2 つの値は固定値ではなく要件に応じて記述されます
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