Uni-app图片上传操作，利用Uview搭配thinkPHP3.2.3框架进行

技术栈：thinkPHP3.2.3；UView2.0；Uni-app

Uview框架u-upload文件（图片）上传组件简单介绍

Upload 上传 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

Uview框架这里不再多说，u-upload是其组件之一，该组件用于上传图片场景。

以官方代码为例，特别注意下面这么方法：

uploadFilePromise(url) {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			formData: {
				user: 'test'
			},
			success: (res) => {
				setTimeout(() => {
					resolve(res.data.data)
				}, 1000)
			}
		});
	})
},

这个方法才是与服务器接口进行数据通信的地方

ThinkPHP3端上传文件接口编写

 /**
 * 上传图片
 */
  public function upload(Type $var = null){
    $files = $_FILES['file'];
    // dump($files);
    $upload = new \Think\Upload();// 实例化上传类
    $upload->maxSize   =     3145728 ;// 设置附件上传大小
    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
    $upload->rootPath  =     './'; // 设置附件上传根目录
    $upload->savePath  =     'Public/uploads/'; // 设置附件上传（子）目录
    $info   =   $upload->uploadOne($files);
    // dump($info);
    if(!$info) {
	      // 上传错误提示错误信息
			  $this->error($upload->getError());
		}else{
			  // 上传成功 获取上传文件信息
		    $infopath = $info['savepath'].$info['savename'];
	          
        $return_data = array();
        $return_data['error_code'] = 0;
        $return_data['msg'] = '图片上传成功';
        $return_data['infopath'] = $infopath;

        $this->ajaxReturn($return_data);
		}
  }

图片上传中遇到的问题

1. ThinkPHP上传失败，权限问题，如下：

遇到这种情况是一般是文件夹权限不够，使用ssh远程连接工具，修改文件夹下所有文件读写权限，包括你要写入的文件夹的权限

sudo chmod -R 777 XXXXX（文件夹）

2. 返回的return_data为字符串类型

   使用JS字符串和对象之间的相互转换方法。

   js字符串和对象之间的转换_tony康的博客-CSDN博客_js字符串转对象