微信小程序学习笔记之文件上传、下载操作图文详解


Posted in Javascript onMarch 29, 2019

本文实例讲述了微信小程序学习笔记之文件上传、下载操作。分享给大家供大家参考,具体如下:

前面介绍了微信小程序登录API与获取用户信息操作。这里再来介绍一下文件的上传与下载操作。

【文件上传】wx.uploadFile

(以上传图片为例)

后台上传接口Upload.php:(tp5)

<?php
namespace app\home\controller;
use think\Controller;
class Upload extends First
{
  //上传图片API
  public function upImg() {
  	$arr = array('state'=>0,'msg'=>'上传失败','filepath'=>'');
    $file = request()->file('file');
    if($file){
      $info = $file->move('upload/weixin/');
      if ($info) {
        $arr['state'] = 1;
        $arr['msg'] = '上传成功';
        $arr['filepath'] = $info->getSaveName();
      }
    }
    return json($arr);
  }
}

前台页面upload.wxml:

<image src='{{imgpath}}' style='width:600rpx; height:600rpx' />
<view>
 <button bindtap="upImg">点击选择上传图</button>
</view>

前台upload.js:

Page({
 data: {
  imgpath: ''
 },
 upImg: function (e) {
  var that = this
  wx.chooseImage({
   count: 1, // 默认最多一次上传9张图片
   sizeType: ['original', 'compressed'], // 允许原图和压缩图
   sourceType: ['album', 'camera'], // 允许相册和相机
   success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.showToast({
     title: '正在上传...',
     icon: 'loading',
     mask: true,
     duration: 500
    })
    wx.uploadFile({
     url: 'https://www.msllws.top/Upload/upImg', //服务器上传接口
     filePath: tempFilePaths[0], //文件资源路径
     name: 'file',
     header: {
      'Content-Type': 'Application/json'
     },
     success(res) {
      console.log(res)
      if (res.statusCode == 200){
       that.setData({
        imgpath: tempFilePaths
       }) 
      }
     }
    })
   }
  })
 }
})

演示效果:

微信小程序学习笔记之文件上传、下载操作图文详解

(其实是有正在上传...效果的,手机录屏没给录上。。)

微信小程序学习笔记之文件上传、下载操作图文详解

微信小程序学习笔记之文件上传、下载操作图文详解 
查看服务器里面多了一张图片:

微信小程序学习笔记之文件上传、下载操作图文详解

嗯哼~

微信小程序学习笔记之文件上传、下载操作图文详解

 【文件下载】wx.downloadFile

(以下载一张图片为例)

在服务器目录下放一张图片1.jpg:

微信小程序学习笔记之文件上传、下载操作图文详解

微信小程序学习笔记之文件上传、下载操作图文详解

download.wxml:

<image src='{{imgpath}}' style='width:600rpx; height:600rpx' />
<view>
 <button bindtap="download">点击下载</button>
</view>

download.js:

Page({
 data: {
  imgpath: ''
 },
 download: function (e) {
  var that = this
  wx.showToast({
   title: '正在下载...',
   icon: 'loading',
   mask: true,
   duration: 500
  })
  wx.downloadFile({
   url: 'https://www.msllws.top/upload/1.jpg', //下载地址 
   type: 'image', //下载的资源类型(imnage/audio/video)
   success: function (res) {
    console.log(res)
    if (res.statusCode == 200) {
     var filepath = res.tempFilePath
     that.setData({
      imgpath: filepath
     })
    }
   }
  })
 }
})

演示效果:

微信小程序学习笔记之文件上传、下载操作图文详解

微信小程序学习笔记之文件上传、下载操作图文详解 微信小程序学习笔记之文件上传、下载操作图文详解

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jQuery 无限级菜单的简单实例
Feb 21 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
微信小程序生成二维码的示例代码
Mar 29 #Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 #Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
详解a标签添加onclick事件的几种方式
Mar 29 #Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
js单词形式的运算符
2014/05/06 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue的mixins属性详解
2018/03/14 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
flask入门之表单的实现
2018/07/18 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python双向链表原理与实现方法详解
2019/12/03 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
主题教育活动总结
2014/05/05 职场文书
收款委托书范本
2014/09/11 职场文书
六五普法宣传标语
2014/10/06 职场文书
大一新生检讨书
2014/10/29 职场文书
如何写辞职书
2015/02/26 职场文书
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers