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


相关文章
|
6月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
836 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
310 0
|
6月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1046 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
995 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
238 0
|
9月前
|
Java Shell Maven
【Azure Container App】构建Java应用镜像时候遇无法编译错误:ERROR [build 10/10] RUN ./mvnw.cmd dependency:go-offline -B -Dproduction package
在部署Java应用到Azure Container App时,构建镜像过程中出现错误:“./mvnw.cmd: No such file or directory”。尽管项目根目录包含mvnw和mvnw.cmd文件,但依然报错。问题出现在Dockerfile构建阶段执行`./mvnw dependency:go-offline`命令时,系统提示找不到可执行文件。经过排查,确认是mvnw文件内容异常所致。最终通过重新生成mvnw文件解决该问题,镜像成功构建。
473 1
|
9月前
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
9月前
|
缓存 小程序 视频直播
基于uni-app+vite5+vue3实战短视频+直播+聊天app应用
基于uniapp+vue3+vite5从0-1实战搭建仿抖音/微信直播带货商城。集短视频+聊天+直播功能于一体。实现全屏沉浸式切换短视频/直播,支持编译运行到h5+小程序端+app端。
531 4
|
10月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发