xsx
3 years ago
27 changed files with 537 additions and 191 deletions
|
Before Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,94 @@ |
|||
<template> |
|||
<view @click="selectAndUpload()"> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "file-upload", |
|||
data() { |
|||
return { |
|||
uploadHeaders: { |
|||
"accessToken": uni.getStorageSync('loginInfo').accessToken |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
maxSize: { |
|||
type: Number, |
|||
default: 10*1024*1024 |
|||
}, |
|||
onBefore: { |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
onSuccess: { |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
onError: { |
|||
type: Function, |
|||
default: null |
|||
} |
|||
}, |
|||
methods: { |
|||
selectAndUpload() { |
|||
let chooseFile = uni.chooseFile || uni.chooseMessageFile; |
|||
console.log(chooseFile) |
|||
chooseFile({ |
|||
success: (res) => { |
|||
res.tempFiles.forEach((file) => { |
|||
// 校验大小 |
|||
if (this.maxSize && file.size > this.maxSize) { |
|||
this.$message.error(`文件大小不能超过 ${this.fileSizeStr}!`); |
|||
this.$emit("fail", file); |
|||
return; |
|||
} |
|||
|
|||
if (!this.onBefore || this.onBefore(file)) { |
|||
// 调用上传图片的接口 |
|||
this.uploadFile(file); |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
uploadFile(file) { |
|||
uni.uploadFile({ |
|||
url: process.env.BASE_URL + '/file/upload', |
|||
header: { |
|||
accessToken: uni.getStorageSync("loginInfo").accessToken |
|||
}, |
|||
filePath: file.path, // 要上传文件资源的路径 |
|||
name: 'file', |
|||
success: (res) => { |
|||
let data = JSON.parse(res.data); |
|||
if(data.code != 200){ |
|||
this.onError && this.onError(file, data); |
|||
}else{ |
|||
this.onSuccess && this.onSuccess(file, data); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
this.onError && this.onError(file, err); |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
computed: { |
|||
fileSizeStr() { |
|||
if (this.maxSize > 1024 * 1024) { |
|||
return Math.round(this.maxSize / 1024 / 1024) + "M"; |
|||
} |
|||
if (this.maxSize > 1024) { |
|||
return Math.round(this.maxSize / 1024) + "KB"; |
|||
} |
|||
return this.maxSize + "B"; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<view class="pop-menu" @tap="onClose()" @contextmenu.prevent=""> |
|||
<view class="menu" :style="menuStyle"> |
|||
<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)"> |
|||
<uni-icons :type="item.icon" size="22"></uni-icons> |
|||
<text> {{item.name}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "pop-menu", |
|||
data() { |
|||
return {} |
|||
}, |
|||
props: { |
|||
menuStyle: { |
|||
type: String |
|||
}, |
|||
items: { |
|||
type: Array |
|||
} |
|||
}, |
|||
methods: { |
|||
onSelectMenu(item) { |
|||
this.$emit("select", item); |
|||
}, |
|||
onClose() { |
|||
this.$emit("close"); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.pop-menu { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 9999; |
|||
} |
|||
|
|||
.menu { |
|||
width: 250rpx; |
|||
position: fixed; |
|||
border: 1px solid #d0d0d0; |
|||
box-shadow: 0 0 20rpx gray; |
|||
background-color: #eeeeee; |
|||
|
|||
.menu-item { |
|||
height: 30px; |
|||
line-height: 30px; |
|||
font-size: 20px; |
|||
display: flex; |
|||
padding: 10px; |
|||
align-items: center; |
|||
border-bottom: 1px solid #d0d0d0; |
|||
} |
|||
} |
|||
</style> |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in new issue