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


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 相关文章推荐
javascript第一课
Feb 27 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
jquery css实现流程进度条
Mar 26 jQuery
JavaScript实现手风琴效果
Feb 18 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python使用append合并两个数组的方法
2015/04/28 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python基于opencv检测程序运行效率
2019/12/28 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
护士自荐信范文
2013/12/15 职场文书
高中生活自我鉴定
2014/01/18 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
汽车专业求职信
2014/06/05 职场文书
机关党员公开承诺书
2014/08/30 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python