.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. DDD(二)聚合、聚合根、领域服务、应用服务、仓储”和“工作单元”、领域事件、集成事件

    DDD(二)聚合.聚合根.领域服务.应用服务.仓储"和"工作单元".领域事件.集成事件 如果觉得样式不好:跳转即可 http://www.lifengying.site/ ...

  2. leecode 19 快慢指针

    记录leecode刷题思路 19. 删除链表的倒数第 N 个结点 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 示例 1: 输入:head = [1,2,3,4,5], n = ...

  3. <<Python编程:从入门到实践>>踩坑记 Django

    <<Python编程:从入门到实践>>踩坑记 Django Django Python 19.1.1.5 模板new_topic 做完书上的步骤后,对主题添加页面经行测试,但是 ...

  4. 7种实现web实时消息推送的方案

    做了一个小破站,现在要实现一个站内信web消息推送的功能,对,就是下图这个小红点,一个很常用的功能. 不过他还没想好用什么方式做,这里我帮他整理了一下几种方案,并简单做了实现. 什么是消息推送(pus ...

  5. HDFS 机架感知与副本放置策略

    HDFS 机架感知与副本放置策略 机架感知(RackAwareness) 通常,大型 Hadoop 集群会分布在很多机架上,在这种情况下, 希望不同节点之间的通信能够尽量发生在同一个机架之内,而不是跨 ...

  6. 在Unity3D中开发的坦克履带模拟器Tank Track Simulator

    为了在Unity游戏中比较真实地模拟坦克履带的运动,本人便开发了这款Tank Track Simulator插件 特点 比较真实地模拟了坦克履带的运动. 本插件中包含了一辆M1A2坦克模型,已经将这个 ...

  7. python机器学习——逻辑回归方法

    背景与原理: 线性回归可以实现对连续结果的预测,但是现实生活中我们常见的另一种问题是分类问题,尤其是二分类问题,在这种情况下使用线性回归就不太合适了,我们实际上需要计算出的是一个在$[0,1]$之间的 ...

  8. if __name__ == '__main__':中的语句无法执行

    在pycarm中我们用了pytest或unittest框架写测试用例,我们如果我们在最后加上if name == 'main':,如以下代码所示.最后我们右键点击运行的时候是不会执行**if name ...

  9. 主要转引本地的pycharm如何与服务器连接

    需求:本地电脑pycharm上编写程序,在服务器端运行代码. 主要参考了这两篇文章: 1. https://blog.csdn.net/qq_43391414/article/details/1205 ...

  10. linux查看所有的用户和组信息

    1.cat /etc/passwd    查看所有用户 2.cat /etc/passwd|grep 用户名,用于查找某个用户 3.cat /etc/group查看所有组信息 4.cat /etc/g ...