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


相关文章
|
8月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
258 0
|
11月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
7月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1213 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
933 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
11月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
11月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
7月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1053 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
340 0

热门文章

最新文章