mirror of
https://gitee.com/myxzgzs/boyue_jnpf.git
synced 2025-08-09 15:52:42 +08:00
340 lines
7.5 KiB
Vue
340 lines
7.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="jnpf-file">
|
|||
|
|
<view class="jnpf-file-box" :style="{textAlign:align}">
|
|||
|
|
<view v-if="!detailed &&!disabled " class="jnpf-file-box-line">
|
|||
|
|
<CommentLsjUpload :ref="lsjUpload" :childId="childId" :width="width" :height="height" :option="option"
|
|||
|
|
:size="fileSize" :formats="getFormats" :instantly="instantly" @uploadEnd="onuploadEnd"
|
|||
|
|
:lsjUpload="lsjUpload" v-if="!disabled"
|
|||
|
|
:currentCount="currentCount">
|
|||
|
|
<view class="icon-ym icon-ym-comment-file" size="mini"></view>
|
|||
|
|
</CommentLsjUpload>
|
|||
|
|
<view class="icon-ym icon-ym-comment-file" size="mini" v-else @click="onCountOver"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-ym icon-ym-comment-file" size="mini" v-if="disabled" @click="onCountOver"></view>
|
|||
|
|
<view class="tipText u-p-l-20">
|
|||
|
|
{{tipText}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import CommentLsjUpload from './lsj-upload/lsj-upload.vue'
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
getDownloadUrl
|
|||
|
|
} from '@/api/common'
|
|||
|
|
|
|||
|
|
const imgTypeList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
CommentLsjUpload
|
|||
|
|
},
|
|||
|
|
name: 'jnpf-upload-img',
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
props: {
|
|||
|
|
modelValue: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => ([])
|
|||
|
|
},
|
|||
|
|
limit: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 9
|
|||
|
|
},
|
|||
|
|
fileSize: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 10
|
|||
|
|
},
|
|||
|
|
sizeUnit: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'MB'
|
|||
|
|
},
|
|||
|
|
accept: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
pathType: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'defaultPath'
|
|||
|
|
},
|
|||
|
|
tipText: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
isAccount: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
folder: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
vModel: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
detailed: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
align: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'right'
|
|||
|
|
},
|
|||
|
|
currentCount: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
percent: '',
|
|||
|
|
fileList: [],
|
|||
|
|
// 上传接口参数
|
|||
|
|
option: {},
|
|||
|
|
params: {
|
|||
|
|
pathType: this.pathType,
|
|||
|
|
isAccount: this.isAccount,
|
|||
|
|
folder: this.folder
|
|||
|
|
},
|
|||
|
|
// 选择文件后是否立即自动上传，true=选择后立即上传
|
|||
|
|
instantly: true,
|
|||
|
|
size: 30,
|
|||
|
|
list: [],
|
|||
|
|
deletable: false,
|
|||
|
|
childId: 'upload' + this.$u.guid(3, false, 2),
|
|||
|
|
lsjUpload: 'lsjUpload' + this.$u.guid(3, false, 2),
|
|||
|
|
width: '48rpx',
|
|||
|
|
height: '48rpx',
|
|||
|
|
disabled: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
baseURL() {
|
|||
|
|
return this.define.baseURL
|
|||
|
|
},
|
|||
|
|
comUploadUrl() {
|
|||
|
|
return this.define.comUploadUrl
|
|||
|
|
},
|
|||
|
|
getFormats() {
|
|||
|
|
let formats = this.accept
|
|||
|
|
formats = formats.replace("image/*", 'png,jpg,jpeg,bmp,gif,webp,psd,svg,tiff')
|
|||
|
|
formats = formats.replace("video/*", 'avi,wmv,mpg,mpeg,mov,rm,ram,swf,flv,mp4,wma,rm,rmvb,flv,mpg,mkv')
|
|||
|
|
formats = formats.replace("audio/*", 'mp3,wav,aif,midi,m4a')
|
|||
|
|
return formats
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
const token = uni.getStorageSync('token')
|
|||
|
|
this.option = {
|
|||
|
|
url: this.baseURL + '/api/file/Uploader/annex',
|
|||
|
|
name: 'file',
|
|||
|
|
header: {
|
|||
|
|
'Authorization': token,
|
|||
|
|
'uid': '27682',
|
|||
|
|
'client': 'app',
|
|||
|
|
'accountid': 'DP',
|
|||
|
|
},
|
|||
|
|
data: this.params
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
modelValue: {
|
|||
|
|
handler(val) {
|
|||
|
|
this.fileList = JSON.parse(JSON.stringify(val));
|
|||
|
|
},
|
|||
|
|
immediate: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onCountOver() {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `最多可以上传${this.limit}个文件`,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
// 某文件上传结束回调(成功失败都回调)
|
|||
|
|
onuploadEnd(item) {
|
|||
|
|
if (this.currentCount >= this.limit) {
|
|||
|
|
// this.disabled = true;
|
|||
|
|
return this.$u.toast('最多可以上传' + this.limit + '个文件')
|
|||
|
|
}
|
|||
|
|
if (item['responseText']) {
|
|||
|
|
let response = JSON.parse(item.responseText)
|
|||
|
|
let count = this.fileList.length
|
|||
|
|
if (count >= this.limit) {
|
|||
|
|
// this.disabled = true;
|
|||
|
|
return this.$u.toast('最多可以上传' + this.limit + '个文件')
|
|||
|
|
}
|
|||
|
|
if (response.code != 200) return this.$u.toast(response.msg)
|
|||
|
|
this.fileList.push({
|
|||
|
|
name: item.name,
|
|||
|
|
fileId: response.data.name,
|
|||
|
|
url: response.data.url,
|
|||
|
|
fileExtension: response.data.fileExtension,
|
|||
|
|
fileSize: response.data.fileSize
|
|||
|
|
})
|
|||
|
|
this.$emit('update:modelValue', this.fileList)
|
|||
|
|
this.$emit('change', this.fileList)
|
|||
|
|
}
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
},
|
|||
|
|
downLoad(item) {
|
|||
|
|
if (item.fileExtension && imgTypeList.includes(item.fileExtension)) return this.previewImage(item)
|
|||
|
|
// #ifdef MP
|
|||
|
|
this.previewFile(item)
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef MP
|
|||
|
|
getDownloadUrl('annex', item.fileId).then(res => {
|
|||
|
|
const fileUrl = this.baseURL + res.data.url + '&name=' + item.name;
|
|||
|
|
// #ifdef H5
|
|||
|
|
window.location.href = fileUrl;
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.downloadFile(res.data.url);
|
|||
|
|
// #endif
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// 移除某个文件
|
|||
|
|
delFile(files) {
|
|||
|
|
this.fileList = files
|
|||
|
|
// if(this.fileList.length >= this.limit) {
|
|||
|
|
// this.disabled = true
|
|||
|
|
// }else{
|
|||
|
|
// this.disabled = false
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
previewFile(item) {
|
|||
|
|
let fileTypes = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx']
|
|||
|
|
let url = item.url
|
|||
|
|
let fileType = url.split('.')[1]
|
|||
|
|
if (fileTypes.includes(fileType)) {
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: this.baseURL + url,
|
|||
|
|
success: (res) => {
|
|||
|
|
var filePath = res.tempFilePath;
|
|||
|
|
uni.openDocument({
|
|||
|
|
filePath: encodeURI(filePath),
|
|||
|
|
showMenu: true,
|
|||
|
|
fileType: fileType,
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('打开文档成功');
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
console.log('小程序', err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.$u.toast(
|
|||
|
|
'该文件类型无法打开'
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
previewImage(item) {
|
|||
|
|
if (!item.url) return
|
|||
|
|
const url = this.baseURL + item.url
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: [url],
|
|||
|
|
current: url,
|
|||
|
|
success: () => {},
|
|||
|
|
fail: () => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '预览图片失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
downloadFile(url) {
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: this.baseURL + url,
|
|||
|
|
success: res => {
|
|||
|
|
if (res.statusCode === 200) {
|
|||
|
|
uni.saveFile({
|
|||
|
|
tempFilePath: res.tempFilePath,
|
|||
|
|
success: red => {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
mask: true,
|
|||
|
|
title: '文件已保存：' + red.savedFilePath, //保存路径
|
|||
|
|
duration: 3000,
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.openDocument({
|
|||
|
|
filePath: red.savedFilePath,
|
|||
|
|
success: ress => {},
|
|||
|
|
fail(err) {}
|
|||
|
|
});
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.icon-ym {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.jnpf-file {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.jnpf-file-box {
|
|||
|
|
|
|||
|
|
.jnpf-file-box-line {
|
|||
|
|
height: 70rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tipText {
|
|||
|
|
color: #606266;
|
|||
|
|
word-break: break-all;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.jnpf-file-item {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex-direction: row;
|
|||
|
|
|
|||
|
|
.jnpf-file-item-txt {
|
|||
|
|
width: 230rpx;
|
|||
|
|
flex: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.showLeft {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.closeBox {
|
|||
|
|
height: 60rpx;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: space-evenly;
|
|||
|
|
flex: 0.2;
|
|||
|
|
|
|||
|
|
.closeTxt {
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #fa3534;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|