.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. PaddleOcr-noavx离线部署文档

    PaddleOcr-noavx离线部署文档 环境与版本说明: 系统 架构 Anaconda3 PaddlePaddle PaccleOCR 银河麒麟Server V10 X86 Anaconda3-2 ...

  2. 利用Comparator对枚举类型进行排序的实现

    1. 利用BeanComparator对List<Object>根据属性进行排序 String daXiaoOrder[] = {"很小","小", ...

  3. JS篇(001)-document load 和 document ready 的区别

    答案: 页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数 问题:如果图片资源较多,加载时间较长,onload后等待 ...

  4. async await和promise的区别,和使用方法

    async和promise都是异步方法,区别是async生成的结果是promise对象,async是promise的终结版. await只能在async中使用,await是阻塞的意思,就是暂停,你一起 ...

  5. JS事件中的target,currentTarget及事件委托

    1.target只存在其事件流的目标阶段,指向事件发生时的元素. 2.currentTarget:可位于捕获,目标和冒泡阶段,始终指向绑定事件的元素.如div>ul>li结构,事件委托在d ...

  6. Error running 'tm8': Cannot load C:\Users\Administrator\.IntelliJIdea2019.3\system\tomcat\Unnamed_jymes_3\conf\server.xml (系统找不到指定的文件。)

    救命救命,由于脑壳被门夹了去更改了idea的配置,导致重启项目报错!又是给自己挖坑的一天,唉!!! 主要是看报错信息还一直以为是tomcat的问题,然后试了很多方法,比如查看配置的tomcat路径.重 ...

  7. react导入的插件不支持服务端渲染报错的解决方法

    正常的导入方法如下: import { useEffect, useState, useRef } from 'react'; 如果不支持服务端渲染的插件这样导入则会报错(具体的报的什么错我忘了),一 ...

  8. windows根据文件名找到进程,并杀死进程。

    背景:最近因为工作原因,装了360杀毒引擎,完了就卸载了.发现一直提示文件正在使用无法删除.文件无法访问等等.经过一系列操作,安全模式下都无法删除,恶心死了... 1.shirt + del 按文件夹 ...

  9. 20200924--图像相似度(奥赛一本通P92 5多维数组)

    给出两幅相同大小的黑白图像(用0-1矩阵)表示,求它们的相似度.说明:若两幅图像在相同位置上的像素点颜色相同,则称它们在该位置具有相同的像素点.两幅图像的相似度定义为相同像素点数占总像素点数的百分比. ...

  10. SQL之查询

    1. SQL之模糊查询 例如查询姓名时,不用输入全名,仅仅输入其中的一部分 语法: select 列名 from 表名 where 列名 like 匹配串 其中 匹配串用英文的单引号括起来 四种匹配模 ...