同步组件
This commit is contained in:
aixianling
@@ -1,149 +1,162 @@
|
||||
<template>
|
||||
<div class="ai-uploader">
|
||||
<div class="imgs flex-align">
|
||||
<div class="img" v-for="(item, index) in fileList" :key="index">
|
||||
<image :src="item.url" hover-class="text-hover" @click="prev(index)" class="image" />
|
||||
<!-- <i class="iconfont" @click="remove(index)"></i> -->
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/upload/del-icon.png" alt="" class="del-icon" @click="remove(index)"/>
|
||||
<div class="fileList">
|
||||
<div class="item" v-for="(item, i) in fileList" :key="i">
|
||||
<template v-if="type == 'image'">
|
||||
<ai-image :src="item.url" :preview="preview"/>
|
||||
<div class="info">
|
||||
<i>{{ item.fileSizeStr }}</i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ai-image :preview="preview" :file="item"/>
|
||||
<div class="info">
|
||||
<span>{{ item.name }} </span>
|
||||
<i>{{ item.fileSizeStr }}</i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="!disabled">
|
||||
<div btn @tap="handleReUpload(i)">
|
||||
重新上传
|
||||
</div>
|
||||
<div btn @tap="remove(i)">
|
||||
删除
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="upload" @click="upload" v-if="fileList.length < limit">
|
||||
<!-- <i class="iconfont"></i> -->
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/upload/add-icon.png" alt="" class="add-icon"/>
|
||||
<span>添加照片</span>
|
||||
<div v-if="!disabled&&(fileList.length == 0 || (multiple && fileList.length < limit))" class="default"
|
||||
@click="upload">
|
||||
<i class="iconfont iconfont-iconAdd"/>
|
||||
<span>{{ placeholder }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from '@/utils/axios.js'
|
||||
import {mapState} from 'vuex'
|
||||
import AiImage from '../AiImage/AiImage'
|
||||
|
||||
export default {
|
||||
name: 'AiUploader',
|
||||
|
||||
model: {
|
||||
event: 'input',
|
||||
prop: 'value',
|
||||
},
|
||||
|
||||
components: {AiImage},
|
||||
props: {
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
limit: {default: 1}, //数量
|
||||
placeholder: {default: '添加图片'}, // 文字提示
|
||||
type: {default: 'image'}, // 文件类型，image还是file
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
type: {
|
||||
type: 'img',
|
||||
},
|
||||
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
fileId: String,
|
||||
mediaId: String,
|
||||
def: {default: () => []},
|
||||
action: {default: '/app/wxcp/upload/uploadFile'},
|
||||
preview: Boolean,
|
||||
size: {default: 10 * 1024 * 1024},
|
||||
disabled: Boolean,
|
||||
},
|
||||
computed: {
|
||||
...mapState(['token']),
|
||||
errorImage() {
|
||||
return this.$cdn + 'file.png'
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.fileList = [...val]
|
||||
def: {
|
||||
handler(v) {
|
||||
if (!!v?.toString()) {
|
||||
if (this.multiple) {
|
||||
this.fileList = v
|
||||
} else if (v?.url) {
|
||||
this.fileList = [v]
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
hideStatus: false,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
remove(index) {
|
||||
this.fileList.splice(index, 1)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit('input', [...this.fileList])
|
||||
this.$emit('change', [...this.fileList])
|
||||
})
|
||||
this.$emit('list', this.fileList)
|
||||
},
|
||||
|
||||
prev(index) {
|
||||
uni.previewImage({
|
||||
current: this.fileList[index].url,
|
||||
urls: this.fileList.map((v) => v.url),
|
||||
})
|
||||
},
|
||||
|
||||
upload() {
|
||||
uni.chooseImage({
|
||||
upload(wait) {
|
||||
let params = {
|
||||
count: this.limit,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
if (this.fileList.length + res.tempFilePaths.length > this.limit && this.limit !== 1) {
|
||||
this.$toast(`图片不能超过${this.limit}张`)
|
||||
|
||||
return false
|
||||
let count = this.fileList?.length + (res.tempFiles?.length || res.tempFile ? 1 : 0)
|
||||
if (count > this.limit && this.limit !== 1) {
|
||||
return this.$u.toast(`不能超过${this.limit}个`)
|
||||
}
|
||||
|
||||
this.$loading('上传中')
|
||||
res.tempFilePaths.forEach((item, index) => {
|
||||
if (index === res.tempFilePaths.length - 1) {
|
||||
this.hideStatus = true
|
||||
}
|
||||
console.log(item)
|
||||
this.uploadFile(item)
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
uploadFile(img) {
|
||||
uni.uploadFile({
|
||||
url: axios.baseURL + '/admin/file/add',
|
||||
filePath: img,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
Authorization: uni.getStorageSync('token'),
|
||||
},
|
||||
success: (res) => {
|
||||
const data = JSON.parse(res.data)
|
||||
|
||||
if (data.code === 0) {
|
||||
if (this.limit === 1) {
|
||||
this.fileList = [
|
||||
{
|
||||
id: data.data[0].split(';')[1],
|
||||
url: data.data[0].split(';')[0],
|
||||
},
|
||||
]
|
||||
} else {
|
||||
this.fileList.push({
|
||||
id: data.data[0].split(';')[1],
|
||||
url: data.data[0].split(';')[0],
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit('input', [...this.fileList])
|
||||
this.$emit('change', [...this.fileList])
|
||||
if (res.tempFiles) {
|
||||
res.tempFiles?.map((item) => {
|
||||
this.uploadFile(item)
|
||||
})
|
||||
} else if (res?.tempFile) {
|
||||
this.uploadFile(res.tempFile)
|
||||
}
|
||||
},
|
||||
}
|
||||
typeof wait == 'function' && wait()
|
||||
if (this.type == 'image') {
|
||||
uni.chooseImage(params)
|
||||
} else if (this.type == 'video') {
|
||||
uni.chooseVideo(params)
|
||||
} else {
|
||||
uni.chooseFile(params)
|
||||
}
|
||||
},
|
||||
uploadFile(img) {
|
||||
if (this.size > 0 && img.size > this.size) {
|
||||
return this.$u.toast(`不能超过${Math.ceil(this.size / 1024 / 1024)}MB`)
|
||||
}
|
||||
uni.showLoading({title: '上传中'})
|
||||
let formData = new FormData()
|
||||
formData.append('file', img)
|
||||
if (this.manual) {
|
||||
this.$emit('manual', img)
|
||||
uni.hideLoading()
|
||||
} else {
|
||||
this.$http.post(this.action, formData, {
|
||||
params: {type: this.type},
|
||||
}).then((res) => {
|
||||
uni.hideLoading()
|
||||
if (res?.data) {
|
||||
this.$emit('data', res.data)
|
||||
this.$u.toast('上传成功!')
|
||||
if (this.action == '/app/wxcp/upload/uploadFile') {
|
||||
this.$emit('update:mediaId', res.data?.media?.mediaId)
|
||||
this.$emit('update:fileId', res.data.file.id)
|
||||
this.fileList.push(res.data.file)
|
||||
} else if (this.action == '/admin/file/add2') {
|
||||
let info = res.data
|
||||
this.$emit('update:fileId', info?.id)
|
||||
this.fileList.push(res.data)
|
||||
} else if (this.action == '/admin/file/add-portrait') {
|
||||
this.fileList.push({url: res.data?.split(";")?.[0], id: res.data?.split(";")?.[1]})
|
||||
}
|
||||
this.$emit("update:def", this.fileList)
|
||||
this.$emit("list", this.fileList)
|
||||
} else {
|
||||
this.$toast(data.msg)
|
||||
this.$u.toast(res.msg)
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
if (this.hideStatus) {
|
||||
this.$hideLoading()
|
||||
this.hideStatus = false
|
||||
}
|
||||
},
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$u.toast(err)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
handleReUpload(i) {
|
||||
this.upload(() => this.remove(i))
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -151,74 +164,74 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-uploader {
|
||||
.del-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
-webkit-transform: translate(50%, -50%);
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
width: 100%;
|
||||
line-height: normal;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.imgs {
|
||||
flex-wrap: wrap;
|
||||
.fileList {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
i {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
font-size: 28px;
|
||||
opacity: 0.8;
|
||||
font-style: normal;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
& > span {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div[btn] {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
|
||||
div:nth-child(4) {
|
||||
color: #f72c27;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.upload {
|
||||
width: 224px;
|
||||
height: 224px;
|
||||
text-align: center;
|
||||
border: 1px solid #dddddd;
|
||||
.default {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f7;
|
||||
color: #89b;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
padding: 42px 0 16px;
|
||||
color: #ddd;
|
||||
.iconfont-iconAdd {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
margin: 50px 0 16px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #dddddd;
|
||||
font-size: 24px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user