您现在的位置是:首页 > 综合文章 > 小程序小程序

小程序图片的上传与下载

譬如朝露2019-02-17小程序689人已围观

简介需要wxml文件和js文件,wxml文件代码如下:<button bindtap=&#39;chooseImg&#39;>选择图片</button> <view><image src=&#39;{{img_l}}&#39;...

需要wxml文件和js文件,wxml文件代码如下:

<button bindtap='chooseImg'>选择图片</button>
<view><image src='{{img_l}}' bindtap='preview_img' mode="aspectFit"></image></view>
 
<button bindtap='up_img'>上传</button>
<button bindtap='down'>下载</button>

js文件代码如下:

wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照,api地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html

DownloadTask wx.downloadFile(Object object)

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径。使用前请注意阅读相关说明

注意:请在服务端响应的 header 中指定合理的 Content-Type 字段,以保证客户端正确处理文件类型。

api地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.downloadFile.html

wx.previewImage(Object object)

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

api地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html

UploadTask wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明

api地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.uploadFile.html

Page({
  data: {
    
  },
  chooseImg: function () {
    var _this = this;
    wx.chooseImage({
      count: 2, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        console.log(res)
        _this.setData({
          img_l: res.tempFilePaths
        })
        console.log(res)

      }
    })
  },
  up_img: function () {
    var _this = this;
    wx.uploadFile({
      url: 'http://127.0.0.1/m_pro/upload.php', //接口
      filePath: _this.data.img_l[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function (res) {
        var data = res.data;
        console.log(data);
        //do something
        console.log("ok")
      },
      fail: function (error) {
        console.log(error);
      }
    })
  },
  preview_img: function () {
    wx.previewImage({
      current: this.data.img_l, // 当前显示图片的http链接
      urls: this.data.img_l // 需要预览的图片http链接列表
    })
  },
  down(){
    console.log(2)
    var DownloadTask=wx.downloadFile({
      url: 'http://127.0.0.1/m_pro/min_img/1545225587417-2018-12-19.png', //仅为示例,并非真实的资源
      success(res) {
        // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
        if (res.statusCode === 200) {
         console.log(res);
          wx.previewImage({
            urls: [res.tempFilePath] // 需要预览的图片http链接列表
          })
        }
      }
    })
    DownloadTask.onProgressUpdate(function(res){
      console.log(res)
    })
  }
})


譬如朝露

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏