.wxml

<button bindtap="chooseFile">选择文件</button>

<view>请输入下载链接</view>
<input bindinput="getContent"></input>
<button bindtap="downLoad">下载</button>

.js

Page({
chooseFile(){ //上传文件
var that=this
wx.chooseMessageFile({
count: 1,
type: 'all',
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
console.log(tempFilePaths[0])
that.upload(tempFilePaths[0].path,tempFilePaths[0].name)
}
})
}, upload(tmpFile,updFile){ //修改
wx.cloud.uploadFile({
cloudPath: updFile, //修改
filePath: tmpFile, // 文件路径
success: res => {
// get resource ID
console.log("上传成功",res)
},
fail: err => {
// handle error
console.log("上传失败",err)
}
})
}, //下载并打开文件 getContent(e){
console.log(e.detail.value)
this.setData({
fileID:e.detail.value
})
},
downLoad(){
var fileID
fileID=this.data.fileID
console.log("下载链接为:",fileID)
wx.cloud.downloadFile({
fileID: fileID,
success: res => {
// get temp file path
console.log("下载成功",res)
const filePath = res.tempFilePath //新增
wx.openDocument({ //新增加
filePath: filePath, //新增加
success: function (res) { //新增加
console.log('打开文档成功') //新增加
}
}) },
fail: err => {
// handle error
console.log("下载失败",res)
}
})
}, })

微信小程序中如何上传和下载文件的更多相关文章

  1. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  2. 微信小程序多张图片上传

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...

  3. [转]微信小程序实现图片上传功能

    本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...

  4. nodeJs实现微信小程序的图片上传

    今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...

  5. 微信小程序实现图片上传功能

    前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...

  6. 微信小程序--实现图片上传

    前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...

  7. [组件封装]微信小程序-图片批量上传照片墙

    描述 批量上传图片, 可设置最大上传个数, 可删除, 可设置默认值. 效果 源码 pictures-wall.wxml <view class="picturesWall"& ...

  8. 微信小程序 多图上传解决方案

    为了使代码体积小  我这里将多图上传 封装到单独的一个js 页面的js调用他 我们看firhealth.js文件内容 // pages/home/home.js var upload = requir ...

  9. 微信小程序多图上传/朋友圈传图效果【附完整源码】

    效果图 部分源代码 js文件: var uploadPicture = require('../Frameworks/common.js') //获取应用实例 const app = getApp() ...

  10. 微信小程序wx.uploadFile 上传文件 的两个坑

    fileUpload: function (tempFilePath) { var that = this;//坑1: this需要这么处理 wx.uploadFile({ url: url地址, / ...

随机推荐

  1. WPFprism框架

    1. Prism 简介Prism 是一个用于构建松耦合.可维护和可测试的 XAML 应用的框架,它支持所有还活着的基于 XAML 的平台,包括 WPF.Xamarin Forms.WinUI 和 ~~ ...

  2. linux查看是实体机还是虚拟机

    1.判断虚拟机三种方式 1.dmesg|grep -i hypervisor [root@localhost ~]# dmesg|grep -i hypervisor [ 0.000000] Hype ...

  3. js已知多边形坐标点,求多边形的中心点坐标

    你需要传入的数据类型如下: // 取面对象 中心点 var calculateCenter = function (lnglatarr) { var total = lnglatarr.length; ...

  4. pgsql给表重命名

    alter table "pavement_damage_dtl_temp" rename to "pavement_damage_dtl"; 搜索 复制

  5. QFramework UI 笔记(后续不断 直到UKitI篇结束)

    1.所有的UIElement  传消息给 UIPanel 时,必须先注册 SendEvent();      RegisterEvent(); 2.注意Unity直接生成控件的名称,命名带(1)之类的 ...

  6. linux搭建FastDFS文件服务器,安装nginx

    本文主要介绍在linux服务器如何搭建FastDFS文件服务器.大概分为9个步骤,由于内容较为繁琐.下面带你入坑! 首先简单介绍一下FastDFS是淘宝资深架构师余庆老师主导开源的一个分布式文件系统, ...

  7. MySQL日期/时间函数

    1.查询当前时间函数: select NOW(),LOCALTIME(),SYSDATE(),CURRENT_TIMESTAMP(); 但是now()与sysdate()有点差异的,一个语句中now( ...

  8. Docker部署网心云-挣点电费

    网心云 是CDN业务的一种,容器魔方 是网心云的容器安装产品,其安装也很简单. 1.启动容器--一行命令 docker run -d --name watchtower --restart alway ...

  9. 【shell脚本实战】脚本#35 分析每个用户使用的磁盘空间大小

    #!/bin/bash #设置 一个变量代表临界值,看看是否能超过这个值,单位是MB MAXDISKUSAGE=20000 #cut -d: -f1,3 /etc/passwd | awk -F: ' ...

  10. 【RTOS】《基于嵌入式实时操作系统的程序设计技术》——任务的划分与封装

    任务的划分与封装 关键任务的划分处理 对于某些对于系统的正常运作至关重要,少执行一次会对系统产生较大影响的功能,我们倾向于将它从原有任务中剥离出来,称为关键任务,用一个独立任务或者ISR(如外部中断) ...