微信小程序 实现上传图片并可以预览图片

我的qq 2038373094

我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会

做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

 

废话不多说，直接上效果图

wxml文件代码

<view>
  <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button>
  <image src="{{tempFilePaths}}" style="width:450rpx; height: 450rpx" />
</view>

wxss文件代码

无

js代码

'use strict';

//index.js  
//获取应用实例  
var app = getApp();
Page({
  data: {
    tempFilePaths: ''
  },
  onLoad: function onLoad() {},
  chooseimage: function chooseimage() {
    var _this = this;
    wx.chooseImage({
      count: 1, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
      success: function success(res) {
        wx.showToast({
          title: '正在上传...',
          icon: 'loading',
          mask: true,
          duration: 1000
        });
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
        _this.setData({
          tempFilePaths: res.tempFilePaths
        });
        console.log(res.tempFilePaths);
      }
    });
  }
});