154 lines
3.6 KiB
Vue
154 lines
3.6 KiB
Vue
<template>
|
|
<view>
|
|
<u-upload :accept="accept" :fileList="imgList" @afterRead="afterRead" @delete="deletePic" :name="paramsName"
|
|
:multiple="isMultiple" :maxCount="limit" ref="upload">
|
|
<u-button v-if="isBtn" plain type="primary" text="上传" size="mini" icon="arrow-upward" class="btn-icon"
|
|
style="border: 1px solid #c2d10a;" iconColor="#c2d10a" color="#c2d10a"></u-button>
|
|
<view v-else class="u-upload__button" :hover-class="!disabled ? 'u-upload__button--hover' : ''"
|
|
hover-stay-time="150" :class="[disabled && 'u-upload__button--disabled']" :style="[{
|
|
width: $u.addUnit(80),
|
|
height: $u.addUnit(80)
|
|
}]" style="background-color: aliceblue;display: flex;align-items: center;justify-content: center;">
|
|
<u-icon name="camera-fill" size="26" color="#D3D4D6"></u-icon>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
options: {
|
|
styleIsolation: 'shared', // 解除样式隔离
|
|
},
|
|
name: "upload_img_video",
|
|
props: {
|
|
|
|
limit: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
isMultiple: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
isBtn: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
accept: {
|
|
type: String,
|
|
default: "image"
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
paramsName: {
|
|
type: String,
|
|
default: "file"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
imgList: [],
|
|
};
|
|
},
|
|
methods: {
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this.imgList.splice(event.index, 1)
|
|
this.$emit('successFile', this.imgList);
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
const that = this;
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this.imgList.length
|
|
lists.map((item) => {
|
|
that.imgList.push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this.imgList[fileListLen]
|
|
that.imgList.splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result.data.url,
|
|
name: result.data.fileName
|
|
}))
|
|
fileListLen++
|
|
}
|
|
this.$emit('successFile', this.imgList);
|
|
},
|
|
uploadFilePromise(url) {
|
|
return new Promise((resolve, reject) => {
|
|
let a = uni.uploadFile({
|
|
url: '/attachment/upload', // 仅为示例，非真实的接口地址
|
|
filePath: url,
|
|
name: this.paramsName,
|
|
success: (res) => {
|
|
resolve(JSON.parse(res.data || {}))
|
|
},
|
|
fail: (e) => {
|
|
reject(e);
|
|
}
|
|
});
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
/deep/.btn-icon {
|
|
font-size: 10rpx !important;
|
|
height: 58rpx !important;
|
|
|
|
/deep/.u-icon {
|
|
/deep/.u-icon__icon--primary {
|
|
font-size: 20rpx !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/deep/.u-button--mini {
|
|
width: 120rpx !important;
|
|
|
|
.u-icon {
|
|
font-size: 20rpx !important;
|
|
|
|
.u-icon__icon {
|
|
font-size: 20rpx !important;
|
|
}
|
|
}
|
|
|
|
height: 58rpx !important;
|
|
}
|
|
|
|
/deep/.u-upload__deletable {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
|
|
.uicon-close {
|
|
font-size: 14px !important;
|
|
line-height: 14px !important;
|
|
}
|
|
}
|
|
|
|
/deep/.u-upload__success {
|
|
border-bottom-color: #c2d10a !important;
|
|
border-right-color: #c2d10a !important;
|
|
|
|
.uicon-checkmark {
|
|
font-size: 14px !important;
|
|
line-height: 14px !important;
|
|
}
|
|
}
|
|
</style>
|