fileList1: [],
// uviewui ui组件
<u-upload
uploadText="上传打款凭证"
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
name="1"
:multiple="false"
:maxCount="1"
></u-upload>

// 新增图片
afterRead(event) {
this.imgUrl = ''
let uploadTask = uni.uploadFile({
url: this.$imgURL + '/api/upload/imgFile', //仅为示例,非真实的接口地址
filePath: event.file.url,
name: 'file',
formData: {
'token': Q.getToken()
},
success: (uploadFileRes) => {
this.imgUrl = JSON.parse(uploadFileRes.data).data
}
});

// 上传中
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
// 上传完成
uploadTask.onProgressUpdate((res) => {
if (res.progress === 100) {
setTimeout(() => {
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: event.file.url
}))
}, 1000)
}
// 测试条件,取消上传任务。
/* if (res.progress > 50) {
uploadTask.abort();
}*/
});

},

uniapp 上传的更多相关文章

  1. uni-app实现图片和视频上传功能

    使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下.uni-app里面没有提供同时上传视频和图片这个插件,只能靠自己手写,  1.页面布局 通过 ...

  2. uni-app开发的应用(小程序,app,web等),使用Node+Koa2开发的后端程序接收上传文件的方法

    uni-app使用使用Node+Koa2开发的后端程序接收上传的文件 通过gitbook浏览此随笔 通过其它客户端上传(h5,小程序等),接收方法一致 使用koa接收时,我们需安装一个中间件koa-b ...

  3. uni-app实现文件上传(h5方式)

    1.嵌入H5页面,需要采用web-view标签,如下: <web-view src="/hybrid/html/index.html" @message="hand ...

  4. uniapp小程序图片前端压缩上传

    目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线 ...

  5. UniApp文件上传(SpringBoot+Minio)

    UniApp文件上传(SpringBoot+Minio) 一.Uni文件上传 (1).文件上传的问题 UniApp文件上传文档 uni.uploadFile({ url: 'https://www.e ...

  6. uni-app 图片上传实战

    uni.uploadFile()将本地资源上传到开发者服务器客户端发起一个post请求content-type multipart/form-data 通过uni.chooseImage获取一个本地资 ...

  7. 网站怎么上传到服务器流程,从本地到服务器上线过程并通过域名(IP地址)进行访问

    制作好的网页想要发布到互联网,该怎么发布呢?我们需要将保存在本地的站点上传站点到服务器,首先我们需要准备一个服务器(可通过服务器公网IP地址访问),也可以购买域名,域名购买可以通过阿里云.腾讯云.百度 ...

  8. 百度小程序上传失败 ServerError:30010的原因

    最近通过uniapp编译百度智能小程序后上传遇到了报错,错误码为30010. 原因很简单开发者工具和版本库产生了冲突. 两个解决方案,升级开发者工具,降低发布时的版本库 exit;

  9. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  10. PHP搭建大文件切割分块上传功能

    背景 在网站开发中,文件上传是很常见的一个功能.相信很多人都会遇到这种情况,想传一个文件上去,然后网页提示"该文件过大".因为一般情况下,我们都需要对上传的文件大小做限制,防止出现 ...

随机推荐

  1. 【MySQL】导出到CSV

    http://www.yiidian.com/mysql/mysql-export-table-to-cvs.html 要将表导出为 CSV 文件,我们将使用SELECT INTO....OUTFIL ...

  2. 浏览器tab标签切换触发监听事件visibilitychange

    document.addEventListener('visibilitychange', function() { if(document.hidden){ //当页面切换或隐藏时触发的代码,可以用 ...

  3. 监控系统grafana常见问题合集

    监控系统搭建完毕后,使用中确实存在不少的习惯问题. 系统组成: 展示界面:Grafana 核心系统:Promethus snmp监控:SNMP Exporter ping监控:Blackbox Exp ...

  4. 不用VS,使用NET 7.0 SDK (v7.0.101)编程c#控制台应用程序方法

    摘要:如果没有vs环境,也可以编程c#控制台应用程序学习c#,方法步骤有下面几个步骤. 1.下载NET 7.0 SDK (v7.0.101)安装 网址https://dotnet.microsoft. ...

  5. 狂神--Vue

    概述 前端三要素 HTML(结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容 CSS(表现) :层叠样式表(Cascading Style sh ...

  6. vue 使用mixin

    mixin 混入 混入提供了一种非常灵活的方式,来分发Vue组件中可以复用的功能,一个混入对象可以包括任意的组件选项,当组件使用混入对象时,所有的混入对象的选项 将被'混合'进入该组件本身的选项,混入 ...

  7. Ping命令的基本使用

    一.Ping命令的基本使用 在网络中 ping 是一个十分强大的 TCP/IP 工具.我们通常会用它来直接 ping ip 地址,来测试网络的连通情况.它的作用主要为: 1.用来检测网络的连通情况和分 ...

  8. VS Code第一部分--创建

    第一步:Win键+R  cmd 打开之后  输入 vue ui 运行结束后  会显示一个仪表盘页面 点击左下方的更多 点击项目管理器 点击创建  输入自己创建的文件夹地址  按回车保存 点击下方的创建 ...

  9. [2] Bert 论文精读

    BERT是NLP领域让预训练这件事情出圈的工作. 开篇Introduction介绍了两类主流的预训练方法: 1.feature-based,即基于特征的,即我首先通过预训练得到一些比较好的特征,然后将 ...

  10. 26_自定义Loader

    自定义Loader loader就是对模块的源代码进行处理(转换),如css-loader.style-loader等 在上一篇的源代码中我们已经知道了loader是在runLoaders才会去使用l ...