FE-V2-XCX/pages_student/mine/upStudentCard.vue

<!-- 学生卡上传 -->
<template>
    <view id="upStudentCard">
        <view class="max-box">
            <view>添加照片</view>
            <img src="@/images/icon_05.png" v-if="!imgUrl" @click="selectImage">
            <img :src="imgUrl" v-else @click="selectImage">
        </view>
        <view class="up-data-button" @click="upDataButton">上传</view>
    </view>
</template>

<script>
    import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
                imgUrl:"",
                imgData:{},
            }
        },
        onLoad() {

        },
        methods: {
            // 图片上传
            selectImage() {
                let self = this;
                wx.chooseImage({
                    count: 1,
                    sizeType: ["original", "compressed"],
                    sourceType: ["album", "camera"],
                    success: function(res) {
                        let tempFilePaths = res.tempFilePaths[0];
                        self.imgData = res.tempFilePaths[0];
                        self.uploadImg(tempFilePaths);
                    }
                });
            },
            async uploadImg(tempFilePaths){
                var self = this;
                uni.showLoading({
                    title: '上传中',
                    mask: true
                });
                uni.uploadFile({
                    url: config.base_url+'/file/upload', //仅为示例，非真实的接口地址
                    header:{'Authorization':uni.getStorageSync('token')},
                    filePath: tempFilePaths,
                    name: 'file',
                    formData: {
                        'user': 'test'
                    },
                    success: (uploadFileRes) => {
                        let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							self.imgUrl = config.base_url+res.data.url;
                            self.realImgUrl = res.data.url;
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
                    },
                    fail: err => {},
                    complete: () => {
                        uni.hideLoading()
                    }
                });
            },
            upDataButton(){
                let self = this;
				if(!this.imgUrl){
					uni.showToast({
						title: "请选择上传图片",
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
                uni.showModal({
                    // title: '确认要退出吗?',
                    content: '确认上传吗?',
                    cancelColor:"#999",
                    confirmColor:"#0183FA",
                    success: function (res) {
                        if (res.confirm) {
                            self.commitCrad();
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            async commitCrad(){
                var self = this;
                uni.showLoading({
                    title: '上传中',
                    mask: true
                });
                uni.uploadFile({
                    url: config.base_url+'/app/lab/api/commit/crad', //仅为示例，非真实的接口地址
                    header:{'Authorization':uni.getStorageSync('token')},
                    filePath: self.realImgUrl,
                    name: 'file',
                    formData: {
                        'file': 'test'
                    },
                    success: (uploadFileRes) => {
                        let res = JSON.parse(uploadFileRes.data);
                        if(res.code == 200){
                            uni.showToast({
                                title: "提交成功",
                                icon:"none",
                                mask:true,
                                duration: 2000
                            });
                            setTimeout(function(){
                                uni.navigateBack();
                            },2000);
                        }else{
                            uni.showToast({
                                title: res.msg,
                                icon:"none",
                                mask:true,
                                duration: 2000
                            });
                        }
                    },
                    fail: err => {},
                    complete: () => {
                        uni.hideLoading()
                    }
                });
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #upStudentCard{
        height:100%;
        width:100%;
        .max-box{
            height:350rpx;
            background #fff
            view{
                line-height :95rpx;
                font-size:28rpx;
                color:#333333;
                margin-left:20rpx;
            }
            img{
                height:180rpx;
                width:180rpx;
                margin:5rpx 0 0 30rpx;
            }
        }
        .up-data-button{
            position absolute
            bottom:0;
            left:0;
            width: 750rpx;
            height: 120rpx;
            background: #0183FA;
            line-height:120rpx;
            text-align center
            color:#fff;
            font-size: 30rpx;
        }
    }
</style>