172 lines
4.3 KiB
Plaintext
172 lines
4.3 KiB
Plaintext
<template>
|
||
<view>
|
||
<view v-if="type == 0" class="pt-10 rows rowsw">
|
||
<image class="w-165 h-165" mode="aspectFill" :src="upUrl" @tap="lookImage()"></image>
|
||
<view v-for="(item,index) in onImages" :key="index" class="ml-5 mr-5 relative">
|
||
<image class="w-165 h-165" mode="aspectFill" :src="item" :key="index"></image>
|
||
<image @tap="detImg(index)" :src="delUrl" class="w-30 h-30 absolute"
|
||
style="right: -10rpx;top: -10rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<view v-else class="pt-10 rows rowsw">
|
||
<image v-if="!onImage" class="w-165 h-165" mode="aspectFill" :src="upUrl" @tap="lookImage()"></image>
|
||
<view v-else class="relative">
|
||
<image class="w-165 h-165" mode="aspectFill" :src="onImage"></image>
|
||
<image @tap="detImg(index)" :src="delUrl" class="w-30 h-30 absolute"
|
||
style="right: -10rpx;top: -10rpx;"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "upLoad",
|
||
data() {
|
||
return {
|
||
onImages: [],
|
||
saveImages: [],
|
||
onImage: '',
|
||
saveImage: '',
|
||
};
|
||
},
|
||
/*
|
||
@param {Boolean} isMust: true [是否必填]
|
||
@param {Number} type: 0/1 默认：1 [多选/单选]
|
||
@param {String} upUrl: /static/icon_19_tp.png [上传图片URL]
|
||
@param {String} delUrl: /static/detIcon.png [删除图片的URL]
|
||
@param {Number} max: 0
|
||
*/
|
||
watch: {
|
||
"images"() {
|
||
this.saveImages = [...this.images]
|
||
this.images.forEach((val,ind) => this.images[ind] = this.URL + val)
|
||
this.onImages = [...this.images]
|
||
},
|
||
"image"() {
|
||
this.saveImage = this.image
|
||
this.onImage = this.image
|
||
}
|
||
},
|
||
props: {
|
||
type: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
upUrl: {
|
||
type: String,
|
||
default: '/static/user/shangchuantupan.png'
|
||
},
|
||
delUrl: {
|
||
type: String,
|
||
default: '/static/detIcon.png'
|
||
},
|
||
max: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
isMust: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
images: {type: Array},
|
||
image: {type: String},
|
||
},
|
||
methods: {
|
||
getImage() {
|
||
let obj = {}
|
||
if (this.Must) {
|
||
if (this.type == 0) {
|
||
if (this.onImages[0]) {
|
||
obj.image = this.onImages
|
||
obj.saveImage = this.saveImages
|
||
} else this.showtt('图片不可为空')
|
||
} else {
|
||
if (this.onImage) {
|
||
obj.image = this.onImage
|
||
obj.saveImage = this.saveImage
|
||
} else this.showtt('图片不可为空')
|
||
}
|
||
} else {
|
||
if (this.type == 0) {
|
||
obj.image = this.onImages
|
||
obj.saveImage = this.saveImages
|
||
} else {
|
||
obj.image = this.onImage
|
||
obj.saveImage = this.saveImage
|
||
}
|
||
}
|
||
return obj
|
||
},
|
||
detImg(index) { //删除图片
|
||
if (this.type == 1) {
|
||
this.onImage = ''
|
||
this.saveImage = ''
|
||
} else {
|
||
this.saveImages.splice(index, 1)
|
||
this.onImages.splice(index, 1)
|
||
}
|
||
|
||
},
|
||
lookImage() { //选择图片
|
||
let that = this
|
||
uni.chooseImage({
|
||
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
count: 1,
|
||
success(res) {
|
||
if (that.max != 0) {
|
||
res.tempFilePaths.forEach((val, index) => {
|
||
let valSize = res.tempFiles[index].size / 1024 / 1024
|
||
if (valSize.toFixed(2) <= Number(that.max)) {
|
||
that.upload(val)
|
||
} else that.$tools.showtt(`不可选择超过${that.max}M的图片，请重新选择`)
|
||
})
|
||
} else {
|
||
res.tempFilePaths.forEach((val, index) => {
|
||
that.upload(val)
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
upload(pathfile) { //上传文件 1=上传图片 2=上传视频
|
||
let that = this
|
||
const token = uni.getStorageSync('token')
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
})
|
||
uni.uploadFile({
|
||
url: that.$tools.upload,
|
||
header: {token},
|
||
filePath: pathfile,
|
||
name: 'file',
|
||
success: (res) => {
|
||
res = JSON.parse(res.data)
|
||
if (res.code === 1) {
|
||
if (that.type === 1) { //单图
|
||
that.onImage = pathfile
|
||
that.saveImage = res.data.url
|
||
} else { //多图
|
||
that.onImages.push(pathfile)
|
||
that.saveImages.push(res.data.url)
|
||
}
|
||
}
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading()
|
||
},
|
||
fail: (err) => {
|
||
this.$tools.showtt('上传失败，请重试')
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|