yunshangxie/tuniao-ui/components/tn-image-upload/tn-image-upload.vue

696 lines
20 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="tn-image-upload-class tn-image-upload">
<block v-if="showUploadList">
<view
v-for="(item, index) in lists"
:key="index"
class="tn-image-upload__item tn-image-upload__item-preview"
:style="{
width: $tn.string.getLengthUnitValue(width),
height: $tn.string.getLengthUnitValue(height)
}"
>
<!-- 删除按钮 -->
<view
v-if="deleteable"
class="tn-image-upload__item-preview__delete"
@tap.stop="deleteItem(index)"
:style="{
borderTopColor: deleteBackgroundColor
}"
>
<view
class="tn-image-upload__item-preview__delete--icon"
:class="[`tn-icon-${deleteIcon}`]"
:style="{
color: deleteColor
}"
></view>
</view>
<!-- 进度条 -->
<tn-line-progress
v-if="showProgress && item.progress > 0 && !item.error"
class="tn-image-upload__item-preview__progress"
:percent="item.progress"
:showPercent="false"
:round="false"
:height="8"
></tn-line-progress>
<!-- 重试按钮 -->
<view v-if="item.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">点击重试</view>
<!-- 图片信息 -->
<image
class="tn-image-upload__item-preview__image"
:src="item.url || item.path"
:mode="imageMode"
@tap.stop="doPreviewImage(item.url || item.path, index)"
></image>
</view>
</block>
<!-- <view v-if="$slots.file || $slots.$file" style="width: 100%;">
</view> -->
<!-- 自定义图片展示列表 -->
<slot name="file" :file="lists"></slot>
<!-- 添加按钮 -->
<view v-if="maxCount > lists.length" class="tn-image-upload__add" :class="{'tn-image-upload__add--custom': customBtn}" @tap="selectFile">
<!-- 添加按钮 -->
<view
v-if="!customBtn"
class="tn-image-upload__item tn-image-upload__item-add"
hover-class="tn-hover-class"
hover-stay-time="150"
:style="{
width: $tn.string.getLengthUnitValue(width),
height: $tn.string.getLengthUnitValue(height)
}"
>
<view class="tn-image-upload__item-add--icon tn-icon-add"></view>
<view class="tn-image-upload__item-add__tips">{{ uploadText }}</view>
</view>
<!-- 自定义添加按钮 -->
<view>
<slot name="addBtn"></slot>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'tn-image-upload',
props: {
// 已上传的文件列表
fileList: {
type: Array,
default() {
return []
}
},
isUniCloud:{
type: Boolean,
default: false
},
// 上传图片地址
action: {
type: String,
default: ''
},
// 上传文件的字段名称
name: {
type: String,
default: 'file'
},
// 头部信息
header: {
type: Object,
default() {
return {}
}
},
// 携带的参数
formData: {
type: Object,
default() {
return {}
}
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 是否自动上传
autoUpload: {
type: Boolean,
default: true
},
// 最大上传数量
maxCount: {
type: Number,
default: 9
},
// 是否显示组件自带的图片预览
showUploadList: {
type: Boolean,
default: true
},
// 预览上传图片的裁剪模式
imageMode: {
type: String,
default: 'aspectFill'
},
// 点击图片是否全屏预览
previewFullImage: {
type: Boolean,
default: true
},
// 是否显示进度条
showProgress: {
type: Boolean,
default: true
},
// 是否显示删除按钮
deleteable: {
type: Boolean,
default: true
},
// 删除按钮图标
deleteIcon: {
type: String,
default: 'close'
},
// 删除按钮的背景颜色
deleteBackgroundColor: {
type: String,
default: ''
},
// 删除按钮的颜色
deleteColor: {
type: String,
default: ''
},
// 上传区域提示文字
uploadText: {
type: String,
default: '选择图片'
},
// 显示toast提示
showTips: {
type: Boolean,
default: true
},
// 自定义选择图标按钮
customBtn: {
type: Boolean,
default: false
},
// 预览图片和选择图片区域的宽度
width: {
type: Number,
default: 200
},
// 预览图片和选择图片区域的高度
height: {
type: Number,
default: 200
},
// 选择图片的尺寸
// 参考上传文档 https://uniapp.dcloud.io/api/media/image
sizeType: {
type: Array,
default() {
return ['original', 'compressed']
}
},
// 图片来源
sourceType: {
type: Array,
default() {
return ['album', 'camera']
}
},
// 是否可以多选
multiple: {
type: Boolean,
default: true
},
// 文件大小(byte)
maxSize: {
type: Number,
default: 10 * 1024 * 1024
},
// 允许上传的类型
limitType: {
type: Array,
default() {
return ['png','jpg','jpeg','webp','gif','image']
}
},
// 是否自定转换为json
toJson: {
type: Boolean,
default: true
},
// 上传前钩子函数,每个文件上传前都会执行
beforeUpload: {
type: Function,
default: null
},
// 删除文件前钩子函数
beforeRemove: {
type: Function,
default: null
},
index: {
type: [Number, String],
default: ''
}
},
computed: {
},
data() {
return {
lists: [],
uploading: false
}
},
watch: {
fileList: {
handler(val) {
val.map(value => {
// 首先检查内部是否已经添加过这张图片因为外部绑定了一个对象给fileList的话(对象引用)进行修改外部fileList时
// 会触发watch导致重新把原来的图片再次添加到this.lists
// 数组的some方法意思是只要数组元素有任意一个元素条件符合就返回true而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
let tmp = this.lists.some(listVal => {
return listVal.url === value.url
})
// 如果内部没有这张图片,则添加到内部
!tmp && this.lists.push({ url: value.url, error: false, progress: 100 })
})
},
immediate: true
},
lists(val) {
this.$emit('on-list-change', val, this.index)
}
},
methods: {
// 清除列表
clear() {
this.lists = []
},
// 重新上传队列中上传失败所有文件
reUpload() {
this.uploadFile()
},
// 选择图片
selectFile() {
if (this.disabled) return
const {
name = '',
maxCount,
multiple,
maxSize,
sizeType,
lists,
camera,
compressed,
sourceType
} = this
let chooseFile = null
const newMaxCount = maxCount - lists.length
// 只选择图片的时候使用 chooseImage 来实现
chooseFile = new Promise((resolve, reject) => {
uni.chooseImage({
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
sourceType,
sizeType,
success: resolve,
fail: reject
})
})
chooseFile.then(res => {
let file = null
let listOldLength = lists.length
res.tempFiles.map((val, index) => {
if (!this.checkFileExt(val)) return
// 是否超出最大限制数量
if (!multiple && index >= 1) return
if (val.size > maxSize) {
this.$emit('on-oversize', val, lists, this.index)
this.showToast('超出可允许文件大小')
} else {
if (maxCount <= lists.length) {
this.$emit('on-exceed', val, lists, this.index)
this.showToast('超出最大允许的文件数')
return
}
lists.push({
url: val.path,
progress: 0,
error: false,
file: val,
//#ifdef H5
extension: val.name.substring(val.name.lastIndexOf(".")) //图片文件后缀名
//#endif
//#ifndef H5
extension: val.path.substring(val.path.lastIndexOf(".")) //图片文件后缀名
//#endif
})
}
})
this.$emit('on-choose-complete', this.lists, this.index)
if (this.autoUpload) this.uploadFile(listOldLength)
}).catch(err => {
this.$emit('on-choose-fail', err)
})
},
// 提示用户信息
showToast(message, force = false) {
if (this.showTips || force) {
this.$tn.message.toast(message)
}
},
// 手动上传通过ref进行调用
upload() {
this.uploadFile()
},
// 对失败图片进行再次上传
retry(index) {
this.lists[index].progress = 0
this.lists[index].error = false
this.lists[index].response = null
this.$tn.message.loading('重新上传')
this.uploadFile(index)
},
// 上传文件
async uploadFile(index = 0) {
var that=this;
if (this.disabled) return
if (this.uploading) return
// 全部上传完成
if (index >= this.lists.length) {
this.$emit('on-uploaded', this.lists, this.index)
return
}
// 检查是否已经全部上传或者上传中
if (this.lists[index].progress === 100) {
this.lists[index].uploadTask = null
if (this.autoUpload) this.uploadFile(index + 1)
return
}
// 执行before-upload钩子
if (this.beforeUpload && typeof(this.beforeUpload) === 'function') {
// 在微信,支付宝等环境(H5正常)会导致父组件定义的函数体中的this变成子组件的this
// 通过bind()方法绑定父组件的this让this的this为父组件的上下文
// 因为upload组件可能会被嵌套在其他组件内比如tn-form这时this.$parent其实为tn-form的this
// 非页面的this所以这里需要往上历遍一直寻找到最顶端的$parent这里用了this.$u.$parent.call(this)
let beforeResponse = this.beforeUpload.bind(this.$tn.$parent.call(this))(index, this.lists)
// 判断是否返回了Promise
if (!!beforeResponse && typeof beforeResponse.then === 'function') {
await beforeResponse.then(res => {
// promise返回成功不进行操作继续
}).catch(err => {
// 进入catch回调的话继续下一张
return this.uploadFile(index + 1)
})
} else if (beforeResponse === false) {
// 如果返回flase继续下一张图片上传
return this.uploadFile(index + 1)
} else {
// 为true的情况不进行操作
}
}
// 检查上传地址
if(this.isUniCloud){
//如果是uinCloud
this.lists[index].error = false
this.uploading = true
// 创建上传对象
const task = uniCloud.uploadFile({
filePath: that.lists[index].url,
cloudPath: that.$tn.uuid() + that.lists[index].extension, //随机文件名+文件后缀
onUploadProgress(progressEvent) {
if (progressEvent.loaded > 0) {
that.lists[index].progress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
that.$emit('on-progress', progressEvent, index, that.lists, that.index)
}
},
success(res) {
if (res.success) {
that.lists[index].response = res
that.lists[index].progress = 100
that.lists[index].error = false
that.$emit('success', res, index, that.lists, that.index)
} else {
that.uploadError(index, res)
}
},
fail: (err) => {
that.uploadError(index, err)
},
complete: (res) => {
// this.$t.message.closeLoading()
that.uploading = false
that.uploadFile(index + 1)
that.$emit('on-change', res, index, that.lists, that.index)
}
});
that.lists[index].uploadTask = task
}else{
if (!this.action) {
this.showToast('请配置上传地址', true)
return
}
this.lists[index].error = false
this.uploading = true
// 创建上传对象
const task = uni.uploadFile({
url: this.action,
filePath: this.lists[index].url,
name: this.name,
formData: this.formData,
header: this.header,
success: res => {
// 判断啊是否为json字符串将其转换为json格式
let data = this.toJson && this.$tn.test.jsonString(res.data) ? JSON.parse(res.data) : res.data
if (![200, 201, 204].includes(res.statusCode)) {
this.uploadError(index, data)
} else {
this.lists[index].response = data
this.lists[index].progress = 100
this.lists[index].error = false
this.$emit('on-success', data, index, this.lists, this.index)
}
},
fail: err => {
this.uploadError(index, err)
},
complete: res => {
this.$tn.message.closeLoading()
this.uploading = false
this.uploadFile(index + 1)
this.$emit('on-change', res, index, this.lists, this.index)
}
})
this.lists[index].uploadTask = task
task.onProgressUpdate(res => {
if (res.progress > 0) {
this.lists[index].progress = res.progress
this.$emit('on-progress', res, index, this.lists, this.index)
}
})
}
},
// 上传失败
uploadError(index, err) {
this.lists[index].progress = 0
this.lists[index].error = true
this.lists[index].response = null
this.showToast('上传失败,请重试')
this.$emit('on-error', err, index, this.lists, this.index)
},
// 删除一个图片
deleteItem(index) {
if (!this.deleteable) return
this.$tn.message.modal(
'提示',
'您确定要删除吗?',
async () => {
// 先检查是否有定义before-remove移除前钩子
// 执行before-remove钩子
if (this.beforeRemove && typeof(this.beforeRemove) === 'function') {
let beforeResponse = this.beforeRemove.bind(this.$tn.$parent.call(this))(index, this.lists)
// 判断是否返回promise
if (!!beforeResponse && typeof beforeResponse.then === 'function') {
await beforeResponse.then(res => {
// promise返回成功不进行操作
this.handlerDeleteItem(index)
}).catch(err => {
this.showToast('删除操作被中断')
})
} else if (beforeResponse === false) {
this.showToast('删除操作被中断')
} else {
this.handlerDeleteItem(index)
}
} else {
this.handlerDeleteItem(index)
}
}, true)
},
// 移除文件操作
handlerDeleteItem(index) {
// 如果文件正在上传中,终止上传任务
if (this.lists[index].progress < 100 && this.lists[index].progress > 0) {
typeof this.lists[index].uploadTask !== 'undefined' && this.lists[index].uploadTask.abort()
}
this.lists.splice(index, 1)
this.$forceUpdate()
this.$emit('on-remove', index, this.lists, this.index)
this.showToast('删除成功')
},
// 移除文件通过ref手动形式进行调用
remove(index) {
if (!this.deleteable) return
// 判断索引合法
if (index >= 0 && index < this.lists.length) {
this.lists.splice(index, 1)
}
},
// 预览图片
doPreviewImage(url, index) {
if (!this.previewFullImage) return
const images = this.lists.map(item => item.url || item.path)
uni.previewImage({
urls: images,
current: url,
success: () => {
this.$emit('on-preview', url, this.lists, this.index)
},
fail: () => {
this.showToast('预览图片失败')
}
})
},
// 检查文件后缀是否合法
checkFileExt(file) {
// 是否为合法后缀
let noArrowExt = false
// 后缀名
let fileExt = ''
const reg = /.+\./
// #ifdef H5
fileExt = file.name.replace(reg, '').toLowerCase()
// #endif
// #ifndef H5
fileExt = file.path.replace(reg, '').toLowerCase()
// #endif
noArrowExt = this.limitType.some(ext => {
return ext.toLowerCase() === fileExt
})
if (!noArrowExt) this.showToast(`不支持${fileExt}格式的文件`)
return noArrowExt
}
}
}
</script>
<style lang="scss" scoped>
.tn-image-upload {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
&__item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
width: 200rpx;
height: 200rpx;
overflow: hidden;
margin: 12rpx;
margin-left: 0;
background-color: $tn-font-holder-color;
position: relative;
border-radius: 10rpx;
&-preview {
border: 1rpx solid $tn-border-solid-color;
&__delete {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
z-index: 10;
border-top: 60rpx solid;
border-left: 60rpx solid transparent;
border-top-color: $tn-color-red;
width: 0rpx;
height: 0rpx;
&--icon {
position: absolute;
top: -50rpx;
right: 6rpx;
color: #FFFFFF;
font-size: 24rpx;
line-height: 1;
}
}
&__progress {
position: absolute;
width: auto;
bottom: 0rpx;
left: 0rpx;
right: 0rpx;
z-index: 9;
/* #ifdef MP-WEIXIN */
display: inline-flex;
/* #endif */
}
&__error-btn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: $tn-color-red;
color: #FFFFFF;
font-size: 20rpx;
padding: 8rpx 0;
text-align: center;
z-index: 9;
line-height: 1;
}
&__image {
display: block;
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
&-add {
flex-direction: column;
color: $tn-content-color;
font-size: 26rpx;
&--icon {
font-size: 40rpx;
}
&__tips {
margin-top: 20rpx;
line-height: 40rpx;
}
}
}
&__add {
width: auto;
display: inline-block;
&--custom {
width: 100%;
}
}
}
</style>