uni-app上传图片使用

最新推荐文章于 2024-08-16 17:07:04 发布

chenny_

最新推荐文章于 2024-08-16 17:07:04 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/chenny_/article/details/112983912

版权

php 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

该博客详细介绍了uni-app中如何实现图片上传功能，包括前端页面调用上传图片函数，uni.chooseImage选择图片，uni.uploadFile上传到后台，以及后台PHP接收并保存图片的流程。整个过程涵盖了前端交互和后端处理的关键步骤。

摘要由CSDN通过智能技术生成

1首先页面调用上传图片函数

<view class="solids" @tap="uploadImage" v-if="imgList.length<1">
						<text class='cuIcon-cameraadd'></text>
					</view>

2uni.chooseImage触发选择图片，本地或者相机

// 选择图片
			ChooseImage(e) {
				this.picList = [];
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						console.log(res);
						this.picSrc = res.tempFilePaths[0]; //后面还能用到 src 暂且留着
						this.cradInfo.card_back_pic = res.tempFilePaths[0];
						if (this.picList.length != 0) {
							this.picList = this.picList.concat(res.tempFilePaths);
							console.log(11111);
						} else {
							//上传图片到后台服务器
							var _self = this;
							uni.uploadFile({
								url: baseUrl + uploadImg,
								filePath: this.cradInfo.card_back_pic,
								name: 'file',
								success: function(r) {
									//打印
									var con = JSON.parse(r.data);
									console.log(con);
									console.log(con.data.path);
									_self.cradInfo.card_back_pic = con.data.path;
								}
							});
							this.picList = res.tempFilePaths
						}
					}
				});
			},

3uni.uploadFile方法把图片传到后台

uni.uploadFile({
								url: baseUrl + uploadImg,
								filePath: this.cradInfo.card_back_pic,
								name: 'file',
								success: function(r) {
									//打印
									var con = JSON.parse(r.data);
									console.log(con);
									console.log(con.data.path);
									_self.cradInfo.card_back_pic = con.data.path;
								}
							});

4.后台处理接受的图片并保存

    /**
     * 上传图片
     */
    public function uploadImage()
    {
        if (!empty($_FILES['file'])) {
            $dir = "Public/Uploads/Card/";
            //获取扩展名
            $exename = $this->getExeName($_FILES['file']['name']);
            if ($exename != 'png' && $exename != 'jpg' && $exename != 'gif') {
                exit('不允许的扩展名');
            }
            $image_name = md5(date('YmdHis') . rand(1000, 9999)) . '.' . uniqid();
            $imageSavePath = $dir . $image_name . '.' . $exename;
            if (move_uploaded_file($_FILES['file']['tmp_name'], $imageSavePath)) {
                $res = array(
                    'path' => $imageSavePath,
                    'data' => $imageSavePath
                );
                $this->apiResponse->show(200, '获取数据成功', $res);

            } else {
                $this->apiResponse->show(400, '获取数据失败');
            }
        }
    }

    public function getExeName($fileName)
    {
        $pathinfo = pathinfo($fileName);
        return strtolower($pathinfo['extension']);
    }

5返回路径后，前端表单提交保存即可