初始提交
This commit is contained in:
294
components/Jnpf/UploadImg/index.vue
Normal file
294
components/Jnpf/UploadImg/index.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<view class="jnpf-upload-img">
|
||||
<view :class="'jnpf-upload jnpf-upload-'+align" v-if="!simple">
|
||||
<template v-if="fileList.length">
|
||||
<view class="u-list-item u-preview-wrap" v-for="(item, index) in fileList" :key="index">
|
||||
<view v-if="!disabled&&!detailed" class="u-delete-icon" @tap.stop="deleteItem(index)">
|
||||
<u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
|
||||
</view>
|
||||
<image class="u-preview-image" :src="jnpf.getAuthImgUrl(item.thumbUrl||item.url)" mode="aspectFill"
|
||||
@tap.stop="doPreviewImage(index)"></image>
|
||||
</view>
|
||||
</template>
|
||||
<u-upload v-if="!detailed" width="150" height="150" :action="comUploadUrl+'annexpic'"
|
||||
:header="uploadHeaders" :form-data="params" @on-list-change="onListChange" :max-size="maxSize"
|
||||
:max-count="realLimit" :show-upload-list="false" :show-progress="false" :deletable="deletable"
|
||||
:uploadText='buttonText' @on-success="onSuccess" @on-error="handleError" ref="uUpload"
|
||||
:file-list="lists" :disabled='disabled' :class="{'jnpf-upload-disabled':disabled}">
|
||||
</u-upload>
|
||||
</view>
|
||||
<view class="tipText u-p-l-20" v-if="!simple">
|
||||
{{tipText}}
|
||||
</view>
|
||||
<view class="text-primary" v-if="simple" @tap.stop="doPreviewImage()">查看图片</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jnpf from '@/utils/jnpf'
|
||||
const units = {
|
||||
KB: 1024,
|
||||
MB: 1024 * 1024,
|
||||
GB: 1024 * 1024 * 1024
|
||||
}
|
||||
export default {
|
||||
name: 'jnpf-upload-img',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [Array, String],
|
||||
default: () => []
|
||||
},
|
||||
tipText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 99
|
||||
},
|
||||
sizeUnit: {
|
||||
type: String,
|
||||
default: 'MB'
|
||||
},
|
||||
pathType: {
|
||||
type: String,
|
||||
default: 'defaultPath'
|
||||
},
|
||||
isAccount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
folder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
detailed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
simple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
sortRule: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
timeFormat: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: '点击上传'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
realLimit: 0,
|
||||
deletable: true,
|
||||
uploadHeaders: {
|
||||
Authorization: ''
|
||||
},
|
||||
params: {
|
||||
pathType: this.pathType,
|
||||
isAccount: this.isAccount,
|
||||
folder: this.folder,
|
||||
sortRule: (this.sortRule || []).join(),
|
||||
timeFormat: this.timeFormat,
|
||||
},
|
||||
lists: [],
|
||||
maxSize: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
limit(val) {
|
||||
this.realLimit = val
|
||||
},
|
||||
modelValue: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.fileList = Array.isArray(val) ? JSON.parse(JSON.stringify(val)) : []
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.uploadHeaders.Authorization = uni.getStorageSync('token')
|
||||
this.maxSize = this.fileSize ? this.fileSize * units[this.sizeUnit] : 10000000000000
|
||||
this.$nextTick(() => {
|
||||
this.lists = this.fileList || []
|
||||
})
|
||||
this.realLimit = this.limit
|
||||
if (this.disabled) this.deletable = false
|
||||
},
|
||||
computed: {
|
||||
comUploadUrl() {
|
||||
return this.define.comUploadUrl
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSuccess(data, index, lists, name) {
|
||||
if (data.code == 200) {
|
||||
this.fileList.push({
|
||||
name: lists[index].file.name,
|
||||
fileId: data.data.name,
|
||||
url: data.data.url,
|
||||
thumbUrl: data.data.thumbUrl,
|
||||
})
|
||||
this.$emit('update:modelValue', this.fileList)
|
||||
this.$emit('change', this.fileList)
|
||||
} else {
|
||||
lists.splice(index, 1)
|
||||
this.$u.toast(data.msg)
|
||||
}
|
||||
},
|
||||
handleError(res, index, lists, name) {
|
||||
lists.splice(index, 1)
|
||||
},
|
||||
deleteItem(index) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要删除此项吗？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.$refs.uUpload.remove(index);
|
||||
this.fileList.splice(index, 1)
|
||||
this.$emit('update:modelValue', this.fileList)
|
||||
this.$emit('change', this.fileList)
|
||||
uni.showToast({
|
||||
title: '移除成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
onListChange(lists) {
|
||||
this.lists = lists || [];
|
||||
},
|
||||
doPreviewImage(index = 0) {
|
||||
const images = this.fileList.map(item => jnpf.getAuthImgUrl(item.url));
|
||||
uni.previewImage({
|
||||
urls: images,
|
||||
current: images[index],
|
||||
success: () => {},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '预览图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.jnpf-upload-img {
|
||||
width: 100%;
|
||||
|
||||
.tipText {
|
||||
color: #606266;
|
||||
word-break: break-all;
|
||||
line-height: 48rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.jnpf-upload {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
&.jnpf-upload-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.jnpf-upload-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
:deep(.u-upload) {
|
||||
.u-list-item {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.jnpf-upload-disabled {
|
||||
:deep(.u-add-wrap) {
|
||||
color: #E6E6E6 !important;
|
||||
border-color: #D9D9D9 !important;
|
||||
}
|
||||
|
||||
:deep(.u-add-tips) {
|
||||
color: #9B9B9B !important;
|
||||
}
|
||||
|
||||
:deep(.u-icon) {
|
||||
color: #9B9B9B !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-preview-wrap {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border: 1px solid #ebecee;
|
||||
overflow: hidden;
|
||||
margin: 10rpx;
|
||||
background: rgb(244, 245, 246);
|
||||
position: relative;
|
||||
border-radius: 10rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.u-preview-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.u-delete-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
z-index: 10;
|
||||
background-color: $u-type-error;
|
||||
border-radius: 100rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user