• uni-app 图片上传(uploadFile)


    uni-app 图片上传在实际操作中的问题

      图片在不改变是如何触发接口和uni-app的uni.uploadFile方法里面的字段对应

    <template>
        
        <wiew>
            <view class="touxiangicon"   @click="upload">
                <image  class="huiyuan_img" :src="image" mode=""></image>
            </view>
            <view class="queding"><button class="save" @click="save">保存</button></view>
        </wiew>
        
        
    </template>
    
    <script>
    </script>
        export default {
                data(){
                iconcheck:0, //头像是否改变
                image:this.httpUrl+'file/static/uptouxiang.png', //默认头像
            },
            methods:{
                <!-- 上传头像 -->
                upload(){
                   _self = this;
                   uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function (res) {
                     const tempFilePaths = res.tempFilePaths;
                     _self.image = tempFilePaths[0];
                     console.log("tempFilePaths[0]",tempFilePaths[0])  //能够打印出选中的图片
                     _self.iconcheck = 1;//点击后图片更改状态由0变成1
                    },
                    error : function(e){
                     console.log(e);
                    }
                   });
                  },
                <!-- 保存按钮 -->
                save(){
                       let _self = this;
                       console.log("_self.image",_self.image)
                       let idcardreg = _self.idcardreg; // 正则身份证
                       let tell = _self.tell; //手机号验证
                       console.log(_self.idnum)
                       if(_self.username == ''){
                           uni.showToast({
                                title: '请填写姓名',
                                duration: 2000,
                                icon: 'none'
                           });
                       }else if(!tell.test(_self.userphone) && _self.userphone != ''){
                           uni.showToast({
                                title: '请填写正确手机号',
                                duration: 2000,
                                icon: 'none'
                           });
                       }else if(!idcardreg.test(_self.idcardval)){
                             uni.showToast({
                                title: '请填写正确身份证',
                                duration: 2000,
                                icon: 'none'
                             });
                       }else if(_self.datepos == ''){
                           uni.showToast({
                                title: '请选择入职时间',
                                duration: 2000,
                                icon: 'none'
                           });
                       }else if(_self.memberIntro == ''){
                           uni.showToast({
                                title: '请填写员工简介',
                                duration: 2000,
                                icon: 'none'
                           });
                       }
                       else if(_self.iconcheck == 0){
                        uni.request({ 
                            url:_self.httpUrl + '',     // 后端api接口
                            method:'POST',
                         data: {
                            
                         }, 
                        header:{ 'content-type':'application/x-www-form-urlencoded' },
                            success:(res) => {
                                console.log(res)
                                if (res.statusCode == 200){
                                    uni.showToast({
                                        icon:'success',
                                        title:"修改成功...",
                                    })
                                }
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url:''
                                    })
                                }, 2000);
                                
                            },error(res1){
                                uni.showToast({
                                    title:"添加失败...",
                                })
                            }
                         });
                       }else{
                        uni.uploadFile({
                            url:_self.httpUrl + '',     // 后端api接口
                            filePath: _self.image, // uni.chooseImage函数调用后获取的本地文件路劲
                            name:'EmployeeImage',     //后端通过'file'获取上传的文件对象(字段)
                             formData: {
                                 // openid:_self.openid,  //剩下的字段
                             }, 
                            header:{"Content-Type": "multipart/form-data"},
                            success:(res) => {
                                console.log(res)
                                if (res.statusCode == 200){
                                    uni.showToast({
                                        icon:'success',
                                        title:"修改成功...",
                                    })
                                }
                                setTimeout(()=>{
                                    uni.navigateTo({
                                        url:''
                                    })
                                },2000)
                                
                            },error(res1){
                                uni.showToast({
                                    title:"添加失败...",
                                })
                            }
                       });
                    
                    }
                    
                }
            }
        }
    
    <style>
        // 写在main.js的正则验证
        Vue.prototype.idcardreg =   /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;//身份证验证
        Vue.prototype.tell = /^1[3456789]d{9}$/;//手机号验证
    </style>
  • 相关阅读:
    LOJ-10108(欧拉回路+并查集)一个图至少用几笔画成
    hdu-1878(欧拉回路)
    LOJ-10106(有向图欧拉回路的判断)
    欧拉回路
    LOJ-10105(欧拉回路模板,套圈法,递归)
    LOJ-10102(求A到B之间的割点)
    LOJ-10103(求删去割点后最多的连通分量)
    LOJ-10102(桥的判断)
    【XSY2278】【HDU5669】the Red Sun(线段树+dijkstra)
    【XSY2434】【CF787D】遗产(线段树+dijkstra)
  • 原文地址:https://www.cnblogs.com/wo1ow1ow1/p/11730220.html
Copyright © 2020-2023  润新知