初始提交
This commit is contained in:
253
components/Jnpf/UploadFileComment/index.vue
Normal file
253
components/Jnpf/UploadFileComment/index.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<view class="jnpf-file">
|
||||
<view class="jnpf-file-box" :style="{textAlign:align}">
|
||||
<view class="jnpf-file-box-line">
|
||||
<!-- #ifndef APP-HARMONY -->
|
||||
<lsj-upload :ref="lsjUpload" :childId="childId" :width="width" :height="height" :option="option"
|
||||
:size="fileSize" :formats="getFormats" :instantly="instantly" @uploadEnd="onuploadEnd"
|
||||
:lsjUpload="lsjUpload">
|
||||
<text class="u-m-r-20 icon-ym icon-ym-generator-menu"></text>
|
||||
<text>上传文件</text>
|
||||
</lsj-upload>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<view @click="chooseFile">
|
||||
<text class="u-m-r-20 icon-ym icon-ym-generator-menu"></text>
|
||||
<text>上传文件</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const imgTypeList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
|
||||
export default {
|
||||
name: 'jnpf-upload-img',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
limit: {
|
||||
type: [Number, String],
|
||||
default: 9
|
||||
},
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
accept: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
parentId: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
pathType: {
|
||||
type: String,
|
||||
default: 'defaultPath'
|
||||
},
|
||||
isAccount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
folder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
vModel: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
detailed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
sortRule: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
timeFormat: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
percent: '',
|
||||
fileList: [],
|
||||
// 上传接口参数
|
||||
option: {
|
||||
parentId: 0
|
||||
},
|
||||
params: {
|
||||
pathType: this.pathType,
|
||||
isAccount: this.isAccount,
|
||||
folder: this.folder,
|
||||
sortRule: (this.sortRule || []).join(),
|
||||
timeFormat: this.timeFormat
|
||||
},
|
||||
// 选择文件后是否立即自动上传，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: '638rpx',
|
||||
height: '60rpx',
|
||||
parId: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
parentId: {
|
||||
handler(val) {
|
||||
this.parId = val
|
||||
this.option.parentId = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
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/Document/Uploader`, //替换为你的接口地址
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': token,
|
||||
'uid': '27682',
|
||||
'client': 'app',
|
||||
'accountid': 'DP',
|
||||
},
|
||||
data: this.params,
|
||||
parentId: this.parId
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 某文件上传结束回调(成功失败都回调)
|
||||
onuploadEnd(item) {
|
||||
if (item['responseText']) {
|
||||
let response = JSON.parse(item.responseText)
|
||||
this.$emit('callback', response)
|
||||
}
|
||||
},
|
||||
chooseFile() {
|
||||
uni.chooseFile({
|
||||
count: 1, //默认100
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths;
|
||||
const fileName = res.tempFiles[0].name
|
||||
const token = uni.getStorageSync('token')
|
||||
uni.uploadFile({
|
||||
url: this.baseURL + '/api/file/Document/Uploader',
|
||||
filePath: tempFilePaths[0],
|
||||
name: 'file',
|
||||
formData: {
|
||||
...this.params,
|
||||
parentId: this.parId,
|
||||
fileName
|
||||
},
|
||||
header: {
|
||||
'Authorization': token,
|
||||
'uid': '27682',
|
||||
'client': 'app',
|
||||
'accountid': 'DP',
|
||||
},
|
||||
success: (response) => {
|
||||
let item = JSON.parse(response.data)
|
||||
this.$emit('callback', {
|
||||
code: item.code,
|
||||
msg: '上传成功'
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jnpf-file {
|
||||
width: 100%;
|
||||
|
||||
.jnpf-file-box {
|
||||
text-align: left !important;
|
||||
|
||||
.jnpf-file-box-line {
|
||||
height: 1.9rem !important;
|
||||
line-height: 1.9rem;
|
||||
|
||||
.lsj-file {
|
||||
.hFile {
|
||||
input {
|
||||
height: 23px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user