微信小程序（组件）----上传单张图片以及获取图片【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
})
},