uniapp 使用uview框架完成图片上传,后端Thinkphp5.1

刚开始遇到了很多坑,为了避免大家踩坑,直接上代码:

  template

<u-upload 
	ref="uUpload"
	:action="action" 
	:auto-upload="true" 
	max-count="9" 
	name="image"
	size-type="['compressed']"
	max-size="3145728"
	>
</u-upload>
<u-button @click="submit">提交</u-button>

  script

data() {
			return {
				// 服务器地址
				action: getApp().globalData.api_url +'/index/Api/upload',
			}
		},
		methods: {
			submit() {
				let files = [];
				// 通过filter,筛选出上传进度为100的文件(因为某些上传失败的文件,进度值不为100,这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理,直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files)
			},
}

  PHP

//接收图片信息并存在本地
    public function upload(){
        // 获取表单上传文件
        $file = request()->file('image');
        // 移动到框架应用根目录/uploads/ 目录下
        $info = $file->validate(['size'=>3145728,'ext'=>'jpg,png,gif,JPG,PNG'])->move( '../public/uploads');
        if($info){
            // 成功上传后 获取上传信息
            $return_data = array(
                'code'=>0,
                'msg'=>"图片上传成功!",
                'result'=>"uploads/".$info->getSaveName(),
            );
            return json_encode($return_data);
        }else{
            // 上传失败获取错误信息
            $return_data = array(
                'code'=>1,
                'msg'=>$file->getError(),
            );
            return json_encode($return_data);
        }
    }

  

原文地址:https://www.cnblogs.com/ffyun/p/14121640.html