uni上传图片

//点击图片时出现操作菜单
        checkimg() {
                uni.showActionSheet({
                    itemList: ["查看头像", "从相册选择图片"],
                    success: (e) => {
                        console.log(e);
                        var index = e.tapIndex;
//点击查看头像时，将头像url的push进arr
                        if (index == 0) {
                            let url = this.persons.head_img;
                            let arr = [];
                            arr.push(url);
//预览图片，必须是一个数组
                            uni.previewImage({
                                urls: arr
                            })
                        } else if (index == 1) {
//上传图片，数量，头像路径
            uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        console.log(res.tempFilePaths[0]);
                        this.persons.head_img = res.tempFilePaths[0]
                        uni.showToast({
                            title:'上傳成功',
                            icon:'none',
                            duration:1000
                        })      
                    }
                })
                        }
                    }
                })
            },

更新。。。

这种方式拿到的是图片本地路径blob格式，刷新时图片又会加载失败，下面用的是uview的上传文件组件

<u-popup v-model="showHeadImg" mode="center" border-radius="10" length="60%" z-index="999">
            <view class="upload-Img">
                <view>
                    <view class="uploader-img">
                        <u-upload :action="action" max-count="1" @on-success="onSuccess" @on-remove="onRemove"></u-upload>
                    </view>
                    <view style="text-align: center;" class="cashout-img" @tap="chooseimg()">保存</view>
                </view>
            </view>
</u-popup>

    chooseimg() {
                if (!!this.head_img) {
                    this.persons.head_img = this.head_img
                    distSetStudentUser(
                            this.persons
                        )
                        .then(res => {
                            if (res.code == 200) {
                                this.showHeadImg = false;
                                uni.showToast({
                                    title: '上傳成功',
                                    icon: 'none',
                                    duration: 1000
                                })
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        });
                } else {
                    uni.showToast({
                        title: '請稍候',
                        icon: 'none'
                    })
                }
    }
    onSuccess(data, index, lists) {
                this.head_img = data.data.path;
            },
    onRemove(index, lists) {
            }

效果
效果

底部弹出的方式

<view class="i" @tap="editava">
    <text>头像</text>
        <view class="i_r">
            <image :src="person.head_image" class="head" @click.stop="check"></image>
            <image src="../../static/icon2.png"></image>
        </view>
    </view>
<u-action-sheet :list="list" border-radius="20rpx" v-model="shown" @click="selimg"></u-action-sheet>

editava() {
    this.shown = true
        },
//图片预览
check() {
    let url = this.person.head_image
    let arr = []
    arr.push(url)
    uni.previewImage({
        urls: arr
        })
},
//上传图片
selimg(index) {
//选择第二项，即相册打开
    if (index == 2) {
        uni.chooseImage({
            count: 1,
            sourceType:['album'],
            success: (res) => {
            var imgFiles = res.tempFilePaths[0];
            uni.uploadFile({
            url: 'http://shares.shuflyer.com/busi/updateImg',//图片上传接口路径
            filePath: imgFiles,
            name: 'file',
            success: (res1) => {
            this.person.head_image = JSON.parse(res1.data).data;//发现res1.data是字符串，需要转为对象
            console.log(this.person.head_image);
            UpdateUserBasic({
                    sessionKey: this.sessionKey,
                    type: 1,
                    value: this.person.head_image
                        }).then(res => {
                        setTimeout(() => {
                            uni.showToast({
                            title: '修改成功！',
                            icon: 'none'
                            })
                            })
                        this.getdata()
                        }).catch(err => {
                })
        })
        }
     })
      }
  })
 }
},

效果