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

作者:李维山 时间:2023-09-07 21:13:21 

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

前面介绍了微信小程序登录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
    })
   }
  }
 })
}
})

演示效果:

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

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

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

来源:https://blog.csdn.net/msllws/article/details/82918970

标签:微信小程序,文件,上传,下载
0
投稿

猜你喜欢

  • Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)

    2021-06-28 16:02:24
  • asp操作Excel类源码

    2009-12-25 19:01:00
  • vue中watch监听器用法之deep、immediate、flush

    2024-04-27 16:13:35
  • python 给图像添加透明度(alpha通道)

    2021-05-04 04:57:22
  • js实现动态增加文件域表单功能

    2024-04-19 09:50:33
  • 编写和优化SQL Server的存储过程

    2009-04-13 10:13:00
  • Python+OpenCV+pyQt5录制双目摄像头视频的实例

    2021-12-22 02:07:24
  • Python 快速验证代理IP是否有效的方法实现

    2022-08-12 07:22:14
  • Python入门教程(五)Python变量的用法

    2021-04-05 11:17:35
  • 解决Git推送错误non-fast-forward的方法

    2022-09-28 11:07:49
  • Java使用正则表达式验证用户名和密码的方法

    2023-06-13 18:05:56
  • JS实现利用两个队列表示一个栈的方法

    2024-02-26 12:41:03
  • Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作

    2021-11-13 16:52:41
  • js 获取图像缩放后的实际宽高,位置等信息

    2024-05-22 10:41:09
  • numpy和pandas中数组的合并、拉直和重塑实例

    2022-06-28 02:55:07
  • 我们需要什么样的压力测试工具?

    2009-09-09 14:18:00
  • Python3 使用pillow库生成随机验证码

    2021-08-30 02:54:10
  • pandas去除重复列的实现方法

    2022-06-27 12:37:31
  • range 标准化之获取

    2023-09-01 05:35:11
  • Python Django 简单分页的实现代码解析

    2021-11-05 13:27:38
  • asp之家 网络编程 m.aspxhome.com