uniapp 上传图片文件组件带PHP后台接收

客官°小女子只卖身不卖艺 2021-09-19 12:52 1334阅读 0赞

交流群：836383650

前端组件：

<template>
    	<view>
    
    		<view @click="uploadClick" class="picBox">
    			<image class="himage" :src="headImg"></image>
    		</view>
    
    	</view>
    </template>
    
    <script>
    	import CommFunction from '../../commons/common.vue'
    	import Config from '../../commons/config.vue'
    	export default {
    		props:[
    			'imgType'
    		],
    		data() {
    			return {
    				previewUrl: [],
    				picNums: 0,
    				uptypeUrl: 'Config.UPLOADIMG',
    				ifimg: true,
    				type: 1,
    				headImg: '../../static/cabin02.png'
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    			uploadClick: function() {
    				let that = this;
    				uni.chooseImage({
    					success: (chooseImageRes) => {
    						const tempFilePaths = chooseImageRes.tempFilePaths;
    
    						uni.uploadFile({
    							url: Config.UPLOADIMG,
    							filePath: tempFilePaths[0],
    							name: 'file',
    							formData: {
    								'user_id': uni.getStorageInfoSync('userId'),
    								'type': that.imgType
    							},
    							success: (uploadFileRes) => {
    								that.headImg = tempFilePaths[0];
    							}
    						});
    					}
    				});
    			}
    		}
    	}
    </script>
    
    <style>
    	/* 上传图片 */
    	.size {
    		font-size: 100rpx;
    	}
    
    	.previewBox {
    		display: flex;
    		flex-wrap: wrap;
    		margin: .3rem;
    		align-items: center;
    	}
    
    	.imgBox {
    		width: 100%;
    		height: 100%;
    		border-radius: 10rpx;
    		overflow: hidden;
    	}
    
    	.previewBoxItem {
    		width: 32%;
    		height: 200rpx;
    		background: #007AFF;
    		margin: 0.6%;
    		border-radius: 10rpx;
    		position: relative;
    		border-radius: 10rpx;
    		overflow: hidden;
    	}
    
    	.picBox {
    		padding: 0 .6rem;
    	}
    
    	.himage {
    		width: 11.7vw !important;
    		height: 11.7vw !important;
    		border-radius: 2vw;
    	}
    
    	/* 删除 */
    	.deleteBox {
    		padding-left: 78%;
    		margin-top: -10px;
    		font-size: 20px;
    		position: absolute;
    		top: 4px;
    		right: 2px;
    	}
    </style>

后台php：

/*
        * 上传图片
        * */
        public function uploadImg(){
    
            $filename=$_FILES['file']['name'];
            $type=$_FILES['file']['type'];
            $tmp_name=$_FILES['file']['tmp_name'];
            $size=$_FILES['file']['size'];
            $error=$_FILES['file']['error'];
    
    
            $types = I('type');
            $user_id = I('user_id');
            $rid = I('rid');
    
            $temp = explode('.',$filename);
    
            $name = $temp[0];
            $typePic = $temp[1];
    
            $filename = time().".".$typePic;
    
            $stored_path = 'Upload/'.basename($filename);
    
    
            $res = move_uploaded_file($tmp_name, $stored_path);
    
    
    
            $httpsStr = '这里是你想保存的路径';
    
            $stored_path = $httpsStr.$stored_path;
    
            $rest = $this->uploadImgSql($types,$stored_path,$user_id,$rid);
    
    
            if ($rest){
                response(0,$stored_path,'');
            }
    
    
        }