上传文件:
官方api文档详细说明地址:wx.chooseMessageFile(Object object) | 微信开放文档
- uni.chooseMessageFile({
- count: 1, // 文件总数
- type: 'file', // 文件类型
- extension: ['doc', 'docx', 'pdf', 'pptx', 'ppt', 'xls', 'xlsx'], // 指定后缀名
- success: (e) => {
- that.uploadDocument(e.tempFiles[0])
- },
- fail: (err) => {
- // 取消上传
- //console.log(err);
- }
- });
触发 mixin.js文件中公用方法 downloadAndOpenDocument()全局函数,进行下载,打开文件
- //item.resumeUrl是根据获取简历信息的后台接口返回的数据 代表了当前上传的文件真实路径地址
-
- <view class="resume-icon" @click="downloadAndOpenDocument(item.resumeUrl)">
- <image :src="getStaticIconPath('openResume.png')" mode="aspectFit" style="width: 40rpx; height:40rpx;"></image>
- </view>
因为有其他组件可能也会用到上传文件的地方,所以我把上传文件的方法写到mixin混入公共组件中 ,并把mixin.js引入到man.js中,实现全局混入,这样其他组件使用起来就不用在引入mixin.js文件,可以直接使用mixin.js文件中的任何公用方法
- //main.js文件
-
- import mixin from '@/src/utils/mixin.js';
- // 全局混入
- Vue.mixin(mixin);
- //mixin.js文件 混入,公共组件
-
- * 下载并打开文件
- downloadAndOpenDocument(url) {
- this.downloadFile(url).then((res) => {
- // console.log(res,'nnnnnn');
- res.tempFilePath && this.openDocument(res.tempFilePath);
- });
- },
下载文件资源到本地:
官方api文档详细说明地址:uni.uploadFile(OBJECT) | uni-app官网
- //mixin.js文件 混入,公共组件
-
- * 下载文件到本地
- //url是从其他组件传过来的,代表着上传文件的url地址
- downloadFile(url) { //下载资源的 url
- return new Promise((resolve, reject) => {
- uni.showLoading({
- title: '下载文档中...'
- });
- uni.downloadFile({
- url,
- success: (res) => {
- // console.log(res,'kkkk');
- resolve(res);
- },
- fail: (e) => {
- // console.log(e,'aaaaaaa');
- reject(e);
- },
- complete: () => {
- uni.hideLoading()
- }
- })
- });
- },
打开下载的本地文件:
官方api文档详细说明地址:uni.saveFile(OBJECT) @savefile | uni-app官网
- //mixin.js文件 混入,公共组件
- * 打开文件
- //url是从下载文件方法里传过来的文件路径地址
- openDocument(url) { //url:文件的路径
- uni.showLoading({
- title: '打开文档中...'
- })
- uni.openDocument({
- filePath: url, //文件路径,可通过 downFile 获得
- showMenu: true, //右上角是否有可以转发分享的功能
- success: (e) => {
-
- },
- fail: err => {
-
- },
- complete: () => {
- uni.hideLoading()
- }
- })
- },
mixin.js文件,下载并打开完整代码:
- //mixin.js文件
-
- * 下载并打开文件
- downloadAndOpenDocument(url) {
- this.downloadFile(url).then((res) => {
- // console.log(res,'nnnnnn');
- res.tempFilePath && this.openDocument(res.tempFilePath);
- });
- },
-
-
- * 下载文件
- downloadFile(url) {
- return new Promise((resolve, reject) => {
- uni.showLoading({
- title: '下载文档中...'
- });
- uni.downloadFile({
- url,
- success: (res) => {
- // console.log(res,'kkkk');
- resolve(res);
- },
- fail: (e) => {
- // console.log(e,'aaaaaaa');
- reject(e);
- },
- complete: () => {
- uni.hideLoading()
- }
- })
- });
- },
-
- * 打开文件
- openDocument(url) {
- uni.showLoading({
- title: '打开文档中...'
- })
- uni.openDocument({
- filePath: url,
- showMenu: true,
- success: (e) => {
-
- },
- fail: err => {
-
- },
- complete: () => {
- uni.hideLoading()
- }
- })
- },