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
        });
      }
    }
  });
},
// ----------------------------------------


相关文章
|
3月前
|
编译器 Linux PHP
【Azure App Service】为部署在App Service上的PHP应用开启JIT编译器
【Azure App Service】为部署在App Service上的PHP应用开启JIT编译器
|
5天前
|
开发框架 监控 .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
|
2月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
28天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
290 0
|
3月前
|
消息中间件 Java
【实战揭秘】如何运用Java发布-订阅模式,打造高效响应式天气预报App?
【8月更文挑战第30天】发布-订阅模式是一种消息通信模型,发送者将消息发布到公共队列,接收者自行订阅并处理。此模式降低了对象间的耦合度,使系统更灵活、可扩展。例如,在天气预报应用中,`WeatherEventPublisher` 类作为发布者收集天气数据并通知订阅者(如 `TemperatureDisplay` 和 `HumidityDisplay`),实现组件间的解耦和动态更新。这种方式适用于事件驱动的应用,提高了系统的扩展性和可维护性。
67 2
|
3月前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
3月前
【Azure Logic App】消费型逻辑应用在消费Service Bus时遇见消息并发速度慢,消息积压
【Azure Logic App】消费型逻辑应用在消费Service Bus时遇见消息并发速度慢,消息积压
|
3月前
【Azure Logic App】在逻辑应用中开启或关闭一个工作流是否会对其它工作流产生影响呢?
【Azure Logic App】在逻辑应用中开启或关闭一个工作流是否会对其它工作流产生影响呢?
|
3月前
|
存储 Linux 开发工具
【Azure App Service】本地Git部署Python Flask应用上云(Azure App Service For Linux)关键错误
【Azure App Service】本地Git部署Python Flask应用上云(Azure App Service For Linux)关键错误
|
3月前
|
域名解析 网络协议 网络安全
【App Service】遇见本地访问Azure App Service应用慢或者是调用第三方接口慢的调试小工具
【App Service】遇见本地访问Azure App Service应用慢或者是调用第三方接口慢的调试小工具

热门文章

最新文章