需要准备的工作:

①、建立微信小程序工程,编写以下代码。

②、通过IDE建立springboot+web工程,编写接收文件以及提供下载文件的方式,并将上传的文件相关信息记录在mysql数据库中。具体请查看https://www.cnblogs.com/chenfeifen/p/10261980.html

一、配置index.wxml

 <!--index.wxml-->
<view class="container">
<view class="userinfo">
<button bindtap="upload"> 上传原图</button>
<button bindtap="download"> 下载图片</button>
</view>
<view class="imginfo">
<block wx:for="{{tempFilePaths}}" wx:key="{{index}}">
<image src="{{item }}" bindtap="listenerButtonPreviewImage" data-index="{{index}}" style="width: 100%;"/>
</block>
<block> <image src='{{downloadPicturePath}}' bindtap='preview_download_picture'></image>
</block>
</view>
</view>

二、配置index.wxss

  1 /**index.wxss**/
2 .userinfo {
3 display: flex;
4 /* flex-direction: column; */
5 align-items: center;
6 }
7 .imginfo {
8 display: flex;
9 flex-direction: column;
10 align-items: center;
11 }
12 .userinfo-avatar {
13 width: 128rpx;
14 height: 128rpx;
15 margin: 20rpx;
16 border-radius: 50%;
17 }
18
19 .userinfo-nickname {
20 color: #aaa;
21 }
22
23 .usermotto {
24 margin-top: 200px;
25 }

三、配置index.js

 //index.js
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
tempFilePaths: [],
downloadPicturePath:''
},
/**
* 上传图片方法
*/
upload: function () {
let that = this;
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 1000
})
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
that.setData({
tempFilePaths: tempFilePaths
})
/**
* 上传完成后把文件上传到服务器
*/
var count = 0;
//上传文件
for (var i = 0; i < this.data.tempFilePaths.length;i++){
wx.uploadFile({
url: "http://*****/upload",//请求上传的url
filePath: tempFilePaths[i],
name: 'filename',
header: {
"Content-Type": "multipart/form-data"
},
success: function (res) {
count++;
//如果是最后一张,则隐藏等待中
if (count == tempFilePaths.length) {
wx.hideToast();
}
wx.showToast({
title: '上传成功',
icon: '',
mask: true,
duration: 1500
})
},
fail: function (res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function (res) { }
})
}
});
}
}
})
},
/**
* 预览下载的图片
*/
preview_download_picture:function(){
wx.previewImage({
current: this.data.downloadPicturePath,
urls: this.data.downloadPicturePath,
})
},
/**
* 下载图片方法
*/
download:function(){
var that = this;
wx.downloadFile({
url:"http://******/download", //仅为示例,并非真实的资源
success: function (res) {
console.log(res)
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.playVoice({
filePath: res.tempFilePath
})
wx.showToast({
title: '下载成功',
icon: '',
mask: true,
duration: 1500
})
that.setData({
downloadPicturePath: res.tempFilePath//将下载的图片路径传给页面显示
})
}
//保存下载的图片到本地
// wx.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success:
// function (data) {
// console.log(data);
// // wx.showModal({
// // title: '下载成功',
// // content: '下载成功',
// // })
// wx.showToast({
// title: '下载成功',
// icon: '',
// mask: true,
// duration: 1500
// })
// that.setData({
// downloadPicturePath: res.tempFilePath
// })
// },
// })
}
});
},
/**
* 预览图片方法
*/
listenerButtonPreviewImage: function (e) {
let index = e.target.dataset.index;
let that = this;
wx.previewImage({
current: that.data.tempFilePaths[index],
urls: that.data.tempFilePaths,
//这根本就不走
success: function (res) {
//console.log(res);
},
//也根本不走
fail: function () {
//console.log('fail')
}
})
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})

  

微信小程序上传与下载文件的更多相关文章

  1. 微信小程序上传Excel文本文件功能

    问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...

  2. 微信小程序上传多张图片,及php后台处理

    微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...

  3. Taro 微信小程序 上传文件到minio

    小程序前端上传文件不建议直接引用minio的js npm包,一来是这个包本身较大,会影响小程序的体积,二来是ak sk需要放到前端存储,不够安全,因此建议通过请求后端拿到签名数据后上传. 由于小程序的 ...

  4. 微信小程序上传后发布或者体验版测试无数据解决办法

    在做微信小程序开发的过程中,发现小程序在本地调用接口的数据都显示,但是上传之后,发现手机体验没有数据.以下为解决办法: 1.先清除缓存试试. 2.打开微信小程序工具右上角的详情——项目设置,将“不校验 ...

  5. 微信小程序-上传照片-多张显示

    图片就是一个简单的效果 实现 先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text ...

  6. 微信小程序-上传下载

    wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...

  7. 微信小程序上传文件遇到的坑

    在开发小程序时,使用的花生壳做的内网映射,域名使用花生壳卖的https域名 在做小程序文件上传时,调用接口,老是报错. Caused by: org.apache.commons.fileupload ...

  8. 微信小程序上传Word文档、PDF、图片等文件

    <view class="main" style="border:none"> <view class="title"&g ...

  9. 微信小程序-上传多张图片加进度条(支持预览、删除)

    2018-12-24 详情示例见:https://www.cnblogs.com/cisum/p/9564898.html 2018-12-29 组件下载见:https://www.cnblogs.c ...

随机推荐

  1. ux.form.field.Password 密码与非密码状态切换

    效果如图: 扩展源码: //扩展 //密码按钮扩展 //支持在密码与非密码之间切换 Ext.define('ux.form.field.Password', { extend: 'Ext.form.f ...

  2. Centos下普通用户设置sudo权限

    若执行sudo命令的用户没有sodu权限,则会报以下错误 violet is not in the sudoers file.This incident will be reported 若想让vio ...

  3. [Codeforces Round #507][Codeforces 1039C/1040E. Network Safety]

    题目链接:1039C - Network Safety/1040E - Network Safety 题目大意:不得不说这场比赛的题面真的是又臭又长...... 有n个点,m条边,每个点有对应的权值c ...

  4. hibernate04--三种状态之间的转换

    public class StudentTest { Session session=null; Transaction transaction=null; //在执行测试方法之前 先执行before ...

  5. ubuntu下安装go环境

    1.官网下载go语言安装包 地址:https://studygolang.com/dl 2.服务器上安装go 将下载下来的安装包解压到/usr/local下 tar xf go1.12.1.linux ...

  6. GCD与LCM

    求最大公约数(GCD)和求最小公倍数(LCM): 首先是求最大公约数,我们可以利用辗转相除法来求 1 int gcd(int a,int b) 2 { 3 if(b==0) 4 return a; 5 ...

  7. css小知识 2

    效果为 为什么还出现出现不同的效果? 浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行 列表 1.无序列表ul 第二,内部必须有子代标签<li&g ...

  8. Python学习之旅(三十六)

    Python基础知识(35):电子邮件(Ⅱ) 收取邮件就是编写一个MUA作为客户端,从MDA把邮件获取到用户的电脑或者手机上 收取邮件最常用的协议是POP协议,目前版本号是3,俗称POP3 Pytho ...

  9. Java应用之shiro

    Apache Shiro是一个强大而灵活的开源安全框架,它能够干净利落地处理身份认证,授权,企业会话管理和加密. 以下是你可以用 Apache Shiro所做的事情: 1.验证用户 2. 对用户执行访 ...

  10. Mybatis连接配置文件详解

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...