微信小程序(组件)----上传单张图片以及获取图片【wx.chooseMedia wx.uploadFile】

微信小程序(组件)----上传单张图片以及获取图片【wx.chooseMedia wx.uploadFile】

在这里插入图片描述
在这里插入图片描述

1.构建组件:

components/chooseMedia/chooseMedia.wxml

<view class="ipt">
  <image class="close1" src="/static/image/close1.png" bindtap="closeBtn" wx:if="{{isShow}}"></image>
  <image class="imgz" src="{{zwImg}}" wx:if="{{!isShow}}"  bindtap="chooseMedia"></image>
  <image class="imgz" src="{{bank_img}}" wx:if="{{isShow}}"  mode="aspectFill"></image>
</view>

components/chooseMedia/chooseMedia.js

// components/chooseMedia/chooseMedia.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    zwImg:{ //提交图片的默认图片
      type:String,
      value:'/static/image/jia.png'
    },
    bank_img:{ //上传的图片路径
      type:String,
      value:''
    },
    isShow:{
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 选择图片
    chooseMedia() {
      wx.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        maxDuration: 30,
        camera: 'back',
        success: (res) => {
          let tempFilePath = res.tempFiles[0].tempFilePath;
          this.uploadFile(tempFilePath)
        }
      })
    },
    // 上传图片到服务器
    uploadFile(tempFilePath) {
      wx.showLoading();
      wx.uploadFile({
        filePath: tempFilePath,
        name: 'file',
        url: getApp().globalData.url + 'common/upload',
        formData: {
          'data': 'bank_img'
        },
        success: (res) => {
          wx.hideLoading();
          const bank_img = JSON.parse(res.data).img; //把数据字符串转变成对象
          if(bank_img){
            this.setData({
              bank_img:bank_img,
              isShow:true
            })
          }     
          this.triggerEvent('chooseMedia', bank_img)      
        }
      })
    },

    // 删除上传图片
    closeBtn(){
      this.setData({
        isShow:false,
        bank_img:''
      })
    }
  }
})

components/chooseMedia/chooseMedia.wxss

/* components/chooseMedia/chooseMedia.wxss */
.imgz{
  width: 140rpx;
  height: 140rpx;
}
.close1{
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  margin-left: 100rpx;
  margin-top: -20rpx;
}

2.引用组件:

在需要引进的json中引用组件:

"usingComponents": {
    "chooseMedia":"/components/chooseMedia/chooseMedia"
  },

在wxml中调用组件:

 <chooseMedia bindchooseMedia="chooseMedia" bank_img="{{infos.card_img}}" isShow="{{isShow}}"></chooseMedia>

在js中调用方法存入数据和发送给子组件数据:

  data: {
    user_id:'',
    isShow:false,
    infos:{}
  },
    // 获取信息
 async getInfos(){
    let infos = await return_method_desc();
    this.setData({
      infos:infos.data,
      isShow:true
    })
  },
  // 获取子组件数据
  chooseMedia(e){
    this.setData({
      ['infos.card_img']: e.detail
    })
  },
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要通过请求网页获取信息并显示,你可以使用微信小程序提供的网络请求 API wx.request()。具体步骤如下: 1. 在小程序的 app.json 文件中配置要请求的网页域名,如: ``` "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "appid": "wx1234567890", "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "小程序", "navigationBarTextStyle": "black" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/about/about", "text": "关于" } ] }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "permission": { "scope.userLocation": { "desc": "小程序需要获取你的地理位置" } }, "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }, "sitemapLocation": "sitemap.json", "requiredBackgroundModes": ["audio"] ``` 2. 在小程序的 js 文件中使用 wx.request() 方法请求网页,并获取数据,如: ``` wx.request({ url: 'https://www.example.com/data.json', success: function(res) { console.log(res.data) } }) ``` 3. 将获取到的数据显示在小程序的界面上,如: ``` Page({ data: { info: '' }, onLoad: function() { var that = this wx.request({ url: 'https://www.example.com/data.json', success: function(res) { that.setData({ info: res.data }) } }) } }) ``` 其中,info 是一个数据绑定变量,用来保存从网页获取的数据。在 onLoad 方法中,使用 that.setData() 方法将获取到的数据更新到界面上。在小程序的 wxml 文件中,可以使用 {{info}} 引用该数据绑定变量,将数据显示在界面上。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值