• 关于uniapp上传文件的一些api文档


    上传文件:

    uni.chooseMessageFile(Object object)

    官方api文档详细说明地址:wx.chooseMessageFile(Object object) | 微信开放文档

    1. uni.chooseMessageFile({
    2. count: 1, // 文件总数
    3. type: 'file', // 文件类型
    4. extension: ['doc', 'docx', 'pdf', 'pptx', 'ppt', 'xls', 'xlsx'], // 指定后缀名
    5. success: (e) => {
    6. that.uploadDocument(e.tempFiles[0])
    7. },
    8. fail: (err) => {
    9. // 取消上传
    10. //console.log(err);
    11. }
    12. });

    触发 mixin.js文件中公用方法 downloadAndOpenDocument()全局函数,进行下载,打开文件

    1. //item.resumeUrl是根据获取简历信息的后台接口返回的数据 代表了当前上传的文件真实路径地址
    2. <view class="resume-icon" @click="downloadAndOpenDocument(item.resumeUrl)">
    3. <image :src="getStaticIconPath('openResume.png')" mode="aspectFit" style="width: 40rpx; height:40rpx;"></image>
    4. </view>

    因为有其他组件可能也会用到上传文件的地方,所以我把上传文件的方法写到mixin混入公共组件中 ,并把mixin.js引入到man.js中,实现全局混入,这样其他组件使用起来就不用在引入mixin.js文件,可以直接使用mixin.js文件中的任何公用方法

    1. //main.js文件
    2. import mixin from '@/src/utils/mixin.js';
    3. // 全局混入
    4. Vue.mixin(mixin);
    1. //mixin.js文件 混入,公共组件
    2. * 下载并打开文件
    3. downloadAndOpenDocument(url) {
    4. this.downloadFile(url).then((res) => {
    5. // console.log(res,'nnnnnn');
    6. res.tempFilePath && this.openDocument(res.tempFilePath);
    7. });
    8. },

    下载文件资源到本地:

    uni.downloadFile(OBJECT)

    官方api文档详细说明地址:uni.uploadFile(OBJECT) | uni-app官网

    1. //mixin.js文件 混入,公共组件
    2. * 下载文件到本地
    3. //url是从其他组件传过来的,代表着上传文件的url地址
    4. downloadFile(url) { //下载资源的 url
    5. return new Promise((resolve, reject) => {
    6. uni.showLoading({
    7. title: '下载文档中...'
    8. });
    9. uni.downloadFile({
    10. url,
    11. success: (res) => {
    12. // console.log(res,'kkkk');
    13. resolve(res);
    14. },
    15. fail: (e) => {
    16. // console.log(e,'aaaaaaa');
    17. reject(e);
    18. },
    19. complete: () => {
    20. uni.hideLoading()
    21. }
    22. })
    23. });
    24. },

    打开下载的本地文件:

    uni.openDocument(OBJECT)

    官方api文档详细说明地址:uni.saveFile(OBJECT) @savefile | uni-app官网

    1. //mixin.js文件 混入,公共组件
    2. * 打开文件
    3. //url是从下载文件方法里传过来的文件路径地址
    4. openDocument(url) { //url:文件的路径
    5. uni.showLoading({
    6. title: '打开文档中...'
    7. })
    8. uni.openDocument({
    9. filePath: url, //文件路径,可通过 downFile 获得
    10. showMenu: true, //右上角是否有可以转发分享的功能
    11. success: (e) => {
    12. },
    13. fail: err => {
    14. },
    15. complete: () => {
    16. uni.hideLoading()
    17. }
    18. })
    19. },

    mixin.js文件,下载并打开完整代码:

    1. //mixin.js文件
    2. * 下载并打开文件
    3. downloadAndOpenDocument(url) {
    4. this.downloadFile(url).then((res) => {
    5. // console.log(res,'nnnnnn');
    6. res.tempFilePath && this.openDocument(res.tempFilePath);
    7. });
    8. },
    9. * 下载文件
    10. downloadFile(url) {
    11. return new Promise((resolve, reject) => {
    12. uni.showLoading({
    13. title: '下载文档中...'
    14. });
    15. uni.downloadFile({
    16. url,
    17. success: (res) => {
    18. // console.log(res,'kkkk');
    19. resolve(res);
    20. },
    21. fail: (e) => {
    22. // console.log(e,'aaaaaaa');
    23. reject(e);
    24. },
    25. complete: () => {
    26. uni.hideLoading()
    27. }
    28. })
    29. });
    30. },
    31. * 打开文件
    32. openDocument(url) {
    33. uni.showLoading({
    34. title: '打开文档中...'
    35. })
    36. uni.openDocument({
    37. filePath: url,
    38. showMenu: true,
    39. success: (e) => {
    40. },
    41. fail: err => {
    42. },
    43. complete: () => {
    44. uni.hideLoading()
    45. }
    46. })
    47. },

  • 相关阅读:
    【C语言】学数据结构前必学的结构体struct详细
    Nginx的高可用集群
    SpringMVC之拦截器
    Python学习笔记-字符串
    主动营销和被动营销哪种外贸获客方式最有效?
    mysql报SQLSTATE[22007]的错误的一个原因
    bootstarp+springboot基于Java的教学仪器设备商城销售网站_o9b00
    UML软件建模软件StarUML mac中文版软件介绍
    07-流媒体-RTMP推流
    计算机毕业设计PySpark+大模型农产品推荐系统 农产品爬虫 农产品商城 农产品大数据 农产品数据分析可视化 PySpark Hadoop
  • 原文地址:https://blog.csdn.net/weixin_64103049/article/details/127671558