使用uni.chooseImage实现手机相册上传

主要使用uni.chooseImage调取手机相册里的图片，把图片链接更新到数据库，再把数据库图片链接，显示到前端页面，点击图片删除按钮，删除数据库图片。

 

 html代码

<view class="item_w row_bw" style="margin-bottom: 10rpx" >

          <view class="name flex_align">

            <text>添加收钱码</text>

          </view>

  <view v-if="!moneyQ">//如果没有值就显示田字格--图片是自己找的

   <image src="../../static/addpage/upload.png" @click="img" style="width: 100rpx; height: 100rpx;"></image>

  </view>

  <view class="pagepic" v-else>//否则的话显示上传的图片

  <image  :src="moneyQ" @click="img" style="width: 100rpx; height: 100rpx;"></image>

  <view  @click="closepicc">x</view>

  </view>

        </view>

data

moneyQ:’’,//上传数据库里面的图片

mthods:

async getmember(){//获取接口

let res=await this.$api.http("接口");

this.moneyQ=res.money_qrcode;

this.res=res;

},

img(){

var _this=this

uni.chooseImage({

// count:  允许上传的照片数量

count:1,

sourceType: ['album'],//通过手机相册上传

async success(res){

   var money_qrcode=res.tempFilePaths[0];//res.tempFilePaths[0];里面是图片地址

      var params={

       userinfo:{

       money_qrcode

       }

   };

   await _this.$api.http("接口",params,"POST",{//对数据库进行更改

    "content-type":"application/json",

   });

   _this.getUserInfo();

   _this.getmember();//调取接口，使页面实时更新

}

});

},

 // 点击收钱码删除按钮，删除图片

 async closepicc(){

 var _this=this;

 var money_qrcode='';

    var params={

     userinfo:{

     money_qrcode

     }

 };

 await _this.$api.http("接口",params,"POST",{

  "content-type":"application/json",

 });

 _this.getUserInfo();

 _this.getmember();//调取接口，使页面实时更新

 },