uni-app uni-file-picker 上传组件实战应用

简介: uni-app uni-file-picker 上传组件实战应用

html

<!-- 导入---------------------------------------- -->
<uni-file-picker 
limit="1" 
:file-extname="fmt" 
file-mediatype="all" 
:disabled="percent < 100"
:auto-upload="false" 
@select="beforeUpload"
>
  <button 
    type="primary" 
    size="mini" 
    :disabled="percent < 100"> 
        {{ 100 > percent ? percent + "%" : "导入数据" }}
    </button>
</uni-file-picker>

data

// 上传----------------------------------------
headers: {
  token: uni.getStorageSync('token'), //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
},
actionUrl: `${this.$d.API_ROOT_URL}/XXX/XXX`,
fmt: ["xls", "xlsx"],
dur: 100,
percent: 100,
// ----------------------------------------

script

// 上传文件----------------------------------------------------------------
showFakeLoading() {
  this.interval && clearInterval(this.interval);
  this.percent = 0;
  this.interval = setInterval(() => {
    this.percent++;
    this.percent >= 99 && clearInterval(this.interval);
  }, this.dur);
},
hideFakeLoading() {
  this.interval && clearInterval(this.interval);
  this.percent = 100;
},
//文件上传之前
beforeUpload(e) {
  const filePath = e.tempFilePaths[0];
  const file = e.tempFiles[0];
  //获取图片临时路径
  uni.uploadFile({
    url: this.actionUrl, //【必填】图片上传地址
    filePath, //【必填】(files和filePath选其一)要上传文件资源的路径。
    name: 'file', //【必填】上传名字,注意与后台接收的参数名一致
    header: this.headers, //设置请求头
    //请求成功,后台返回自己服务器上的图片地址
    success: d => {
      d = JSON.parse(d.data)
      // 上传成功了
      if (d.success) {
        let response = d;
        if (response.data && response.data.key) {
          // 下载失败原因的描述文件
          this.$d.customer_downloadImportCustomerExcel({
            key: response.data.key
          }, {
            s: (d) => {
              this.$g.downloadFile(d, `${file.name}-上传失败原因`, '.xls');
              uni.showToast({
                icon: `none`,
                title: `${file.name}-上传失败,请查看失败原因`
              });
              setTimeout(() => {
                this.initList(true); //刷新列表
              }, 1500);
              //console.log('上传失败', response, file, fileList);
            }
          });
        } else if (response.success) {
          // 上传成功了
          uni.showToast({
            icon: `none`,
            title: `“${file.name}”导入成功`
          });
          setTimeout(() => {
            this.initList(true); //刷新列表
          }, 1500);
          //console.log('上传成功', response, file, fileList);
        } else {
          // 其他失败原因
          uni.showToast({
            icon: `none`,
            title: response.msg
          });
          //console.log('上传失败', response, file, fileList);
        }
      } else {
        uni.showToast({
          icon: `none`,
          title: d.msg
        });
      }
    }
  });
},
// ----------------------------------------


相关文章
|
1天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
19 6
|
29天前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈,实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
62 2
|
1月前
|
开发框架 监控 .NET
【Azure App Service】部署在App Service上的.NET应用内存消耗不能超过2GB的情况分析
x64 dotnet runtime is not installed on the app service by default. Since we had the app service running in x64, it was proxying the request to a 32 bit dotnet process which was throwing an OutOfMemoryException with requests >100MB. It worked on the IaaS servers because we had the x64 runtime install
|
3月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
453 0
|
2月前
|
机器学习/深度学习 搜索推荐 数据挖掘
北邮移动互联网应用大作业实验报告《云账本app》开发
北邮移动互联网应用大作业实验报告《云账本app》开发
45 0
|
4月前
|
消息中间件 Java
【实战揭秘】如何运用Java发布-订阅模式,打造高效响应式天气预报App?
【8月更文挑战第30天】发布-订阅模式是一种消息通信模型,发送者将消息发布到公共队列,接收者自行订阅并处理。此模式降低了对象间的耦合度,使系统更灵活、可扩展。例如,在天气预报应用中,`WeatherEventPublisher` 类作为发布者收集天气数据并通知订阅者(如 `TemperatureDisplay` 和 `HumidityDisplay`),实现组件间的解耦和动态更新。这种方式适用于事件驱动的应用,提高了系统的扩展性和可维护性。
81 2
|
4月前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
4月前
【Azure Logic App】在逻辑应用中开启或关闭一个工作流是否会对其它工作流产生影响呢?
【Azure Logic App】在逻辑应用中开启或关闭一个工作流是否会对其它工作流产生影响呢?
|
4月前
|
存储 Linux 开发工具
【Azure App Service】本地Git部署Python Flask应用上云(Azure App Service For Linux)关键错误
【Azure App Service】本地Git部署Python Flask应用上云(Azure App Service For Linux)关键错误

热门文章

最新文章