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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM