uni-app上传附件与附件预览
效果图使用的插件链接:附件上传选择vue内嵌版lsj-upload - DCloud 插件市场app端使用这个插件有点问题,所以把上传功能写到了一个跳转的页面才能触发上传功能H5端不会有这个问题示例代码//附件页<template><view class="list1-con-t"><view class="fu"><view class="f...
·
效果图
使用的插件链接:附件上传选择vue内嵌版lsj-upload - DCloud 插件市场
app端使用这个插件有点问题,所以把上传功能写到了一个跳转的页面才能触发上传功能
H5端不会有这个问题
示例代码
//附件页
<template>
<view class="list1-con-t">
<view class="fu">
<view class="fulist" v-for="(item,index) in fuList" :key="item.id" @click="fuBtn(item)">
<view class="" >
{{item.originFileName}}
</view>
<view class="" @click.stop="delUserInfoAnnex(item)">
<u-icon name="close-circle"></u-icon>
</view>
</view>
</view>
<view class="btn" @click="accessory">
上传附件
</view>
</view>
</template>
<script>
export default {
data() {
return {
userId:'',
fuList: [],
}
},
onLoad(options) {
this.userId = options.userId
},
methods: {
// 点击附件预览
fuBtn(e) {
console.log('点击附件',e);
this.viewFile(e.filePath)
},
// 删除附件
delUserInfoAnnex(e) {
this.$api.delUserInfoAnnex(e.id).then(res => {
console.log('删除',res);
this.getAnnexList(e.userID)
})
},
viewFile(e) {
uni.downloadFile({
url: this.baseUrl + e,
success: function (res) {
var filePath = res.tempFilePath;
console.log(res);
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function (res) {
console.log('打开文档成功');
}
});
}
});
}
}
}
</script>
<style>
</style>
//上传附件页
<template>
<view class="content">
<view class="main">
<lsj-upload
ref="lsjUpload"
width="100px"
height="80rpx"
childId="upload"
:size="10"
v-model="percent"
@input="onInput"
@callback="onCallback">
<view class="btn" style="height: 80rpx;">选择附件上传</view>
</lsj-upload>
</view>
</view>
</template>
<script>
export default {
data() {
return {
percent: '',
userId: ''
}
},
onReady() {
// 初始化参数并创建上传DOM
this.onCreate();
},
onLoad(options) {
this.userId = options.userId
},
methods: {
onCreate() {
console.log('初始化附件插件');
// 初始化参数并创建上传DOM
this.$refs.lsjUpload.create({
// #ifdef APP-PLUS
cuWebview: this.$mp.page.$getAppWebview(), // app必传
// #endif
url: '', //替换为你的接口地址
name: 'file', // 附件key
size: 10, // 附件上传大小上限(M),默认10M
debug: true,
//根据你接口需求自定义请求头
header: {
'Authorization': `token`
},
//根据你接口需求自定义body参数
formData: {
'orderId': 1000
}
});
},
onInput(e) {
console.log('上传进度',e);
},
onCallback(e) {
consoel.log('上传结果',e)
},
}
}
</script>
<style>
.content {
width: 100%;
height: 500px;
position: relative;
}
.main {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
.btn {
height: 80rpx;
background-color: #007AFF;
color: #fff;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
}
</style>
记录一下实用的功能
更多推荐
已为社区贡献3条内容
所有评论(0)