移动端——上传多张图片

<template>

<view class="container">

<view class="main">

<view class="main-upload u-flex u-flex-wrap">

<view class="main-upload-image"

:class="[{'main-upload-top':index >= 3},{'main-upload-left':index !== 0 && index%3 !== 0}]"

v-for="(item,index) in uploadList" :key="index">

<view class="">

<u-image border-radius="10" width="190" height="190" :src="commonImgUrl+item"></u-image>

</view>

<view class="main-upload-image__delete" @click="deleteImage(index)">

<u-image width="36" height="36" :src="deleteSrc"></u-image>

</view>

</view>

<view class="main-upload-add"

:class="[{'main-upload-margin':uploadList.length > 2},{'main-upload-left':uploadList.length > 0 && uploadList.length%3 !==0}]"

@click="uploadImage">

<view class="main-upload-add__image">

<u-image border-radius="10" width="64" height="57" :src="uploadSrc"></u-image>

</view>

<view class="main-upload-add__text">

上传照片

</view>

</view>

</view>

<view class="main-title">

<u-input placeholder="此处要填写标题哦～" :custom-style="inputCustom" v-model="title"

:placeholder-style="inputHolderStyle" />

</view>

<view class="main-content">

<u-input placeholder="填写正文" maxlength="-1" :clearable="false" type="textarea" v-model="content"

:placeholder-style="areaHolderStyle" />

</view>

</view>

<view class="btn" @click="handleUpload">

提交

</view>

</view>

</template>

<script>

import common from '../../common/common.js'

export default {

data() {

return {

commonImgUrl:'',// 图片地址前缀域名

// 上传图片

uploadList: [],

uploadSrc: '/static/upload.png',//图标图片

deleteSrc: '/static/del.png',//图标图片

// 标题

title: '',

// 内容

content: '',

flagIndex: 0,

failUpload: false,

inputCustom: {

padding: 0,

},

inputHolderStyle: "font: 32rpx 'PingFangSC-Regular', 'PingFang SC';color: #999999;",

areaHolderStyle: "font: 28rpx 'PingFangSC-Regular', 'PingFang SC';color: #999999;",

}

},

mounted() {

this.commonImgUrl = common.IMGURL;

},

beforeDestroy() {

},

methods: {

// 删除已选图片

deleteImage(_index) {

this.uploadList.splice(_index, 1);

},

// 提交

handleUpload() {

if (this.uploadList.length <= 0) return common.showToast({

title: '请上图片'

});

if (!this.title) return common.showToast({

title: '请填写标题'

});

if (!this.content) return common.showToast({

title: '请填写内容'

});

let test = this.uploadList.join(',')

this.$apis.savesTrategy({

MemberID: common.getstate().ID, //用户id

Substance: this.content, //内容

Type: "1", //类型

Title: this.title, //标题

Images: test, //图片地址,隔开

}).then(busRes => {

console.log('busRes', busRes);

common.showToast({

title: "发布成功",

waiting: true,

callback: () => {

this.title = "";

this.content = "";

this.uploadList = [];

}

})

}).catch(busErr => {

console.log('busErr', busErr);

})

},

// 上传图片

uploadImage() {

uni.chooseImage({

// count: 1, //默认9

sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], //从相册选择 album

success: (res) => {

uni.showLoading({

title: '上传中'

});

this.flagIndex = 0;

res.tempFilePaths.forEach((v, i) => {

this.upImage(v);

})

}

})

},

// 封装上传图片

upImage(_tempFilePath) {

this.flagIndex++;

uni.uploadFile({

url: common.URL + "../upload",

filePath: _tempFilePath,

name: 'file',

formData: common.postdata({

dir: "Strategy",

old: ''

}),

success: (uploadFileRes) => {

let res = JSON.parse(uploadFileRes.data)

if (res.code === 200) {

let uploadSrc = res.data;

this.uploadList.push(uploadSrc);

// uni.showToast({

// icon: 'none',

// title: '图片上传成功'

// })

} else {

this.failUpload = true;

uni.showToast({

title: '图片上传失败',

icon: 'none',

image: '',

duration: 1500,

mask: true,

})

}

},

fail: (err) => {

this.failUpload = true;

console.log('err', err);

uni.showToast({

icon: 'none',

title: '图片上传失败'

})

},

complete: () => {

this.flagIndex--;

if (this.flagIndex == 0 && !this.failUpload) {

uni.showToast({

icon: 'none',

title: '图片上传成功'

})

}

},

})

},

}

}

</script>

<style lang="scss" scoped>

.container {

min-height: calc(100vh - 52px);

background: #F9F9F9;

padding: 30rpx 30rpx 30rpx;

.main {

padding: 30rpx;

background: #FFFFFF;

border-radius: 10rpx;

margin-bottom: 60rpx;

.main-upload {

.main-upload-image {

border-radius: 10rpx;

position: relative;

&__delete {

position: absolute;

top: 0;

right: 0;

}

}

.main-upload-top {

margin-top: 30rpx;

}

.main-upload-left {

margin-left: 30rpx;

}

.main-upload-add {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

width: 190rpx;

height: 190rpx;

background: #F8FBF7;

border-radius: 10rpx;

border: 1px dashed #979797;

&__image {}

&__text {}

}

.main-upload-margin {

margin-top: 30rpx;

}

}

.main-title {

padding: 50rpx 0 16rpx;

border-bottom: 1px solid #EEEEEE;

}

.main-content {

min-height: 340rpx;

}

}

.btn {

margin: 0 30rpx;

height: 68rpx;

background: linear-gradient(95deg, #B7EB8F 0%, #52C41A 100%);

border-radius: 34rpx;

font: 28rpx/68rpx "PingFangSC-Regular", 'PingFang SC';

color: #FFFFFF;

text-align: center;

}

}

</style>