uni-app上传附件与附件预览

效果图

使用的插件链接:附件上传选择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-uploadref="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() {// 初始化参数并创建上传DOMthis.onCreate();},onLoad(options) {this.userId = options.userId        },methods: {        onCreate() {console.log('初始化附件插件');// 初始化参数并创建上传DOMthis.$refs.lsjUpload.create({// #ifdef APP-PLUScuWebview: this.$mp.page.$getAppWebview(), // app必传// #endifurl: '', //替换为你的接口地址name: 'file', // 附件keysize: 10, // 附件上传大小上限(M)，默认10Mdebug: 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>

记录一下实用的功能

uni-app上传附件与附件预览相关推荐

利用钉钉云盘实现业务系统需要的附件上传、下载和预览
本文主要记录自己在工作学习中遇到的坑和解决思路,仅供大家参考目录前言一.钉盘是什么? 二.为什么要使用钉盘? 三.JSAPI鉴权 1.鉴权的时机 2.鉴权的时效 3.鉴权的代码 3.1.获取ac ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
文件上传，下载，预览，删除（File），分页接口
文件上传,下载,预览,删除(File) 1.公共参数方法 1.1公共返回类型定义 1.2 分页接口 1.3公共实体类 1.4 公共的 mapper.java/xml(都放在一起) 1.4.1 File ...
Springboot + layui + FTP文件上传删除 + HTTP文件下载预览 + pdf.js文件预览（项目实战总结）
文件管理 0.需求及前言 1.前端,上传按钮嵌入数据表格中 2.利用IIS部署FTP文件服务器 3.后台FTP连接和文件操作 4.FTP遇到的问题和解决方案 5.预览PDF文件V1.0:FTP+临时文 ...
小程序自定义上传富文本并预览
上传时的效果预览时的效果代码如下(可直接全部复制查看,注意:下面上传的接口需要改成你们自己的服务器上传接口) <view class="col"><text& ...
html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
[html] 图片上传时实现本地预览功能的原理是什么？
[html] 图片上传时实现本地预览功能的原理是什么? 通过HTML5 File API读取用户上传的图片,生成一个image对象显示到页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
SpringBoot+MongoDB GridFS文件上传、下载、预览实战
SpringBoot + MongoDB GridFS 随着web 3.0的兴起,数据的形式不局限于文字,还有语音.视频.图片等.高效存储与检索二进制数据也成为web 3.0必须要考虑的问题.然而这种 ...

uni-app上传附件与附件预览

uni-app上传附件与附件预览相关推荐

最新文章

热门文章