thinkcmf + uni-app 实现图片上传

布满荆棘的人生 2023-02-15 12:44 1阅读 0赞

## 说明 ##

uni-app 使用的是ThorUI组件库，超赞的组件库。快速开发推荐使用 -----> [ThorUI官网][ThorUI]

### uni-app 页面 ###

#### template ####

thorUI有示例，直接从示例里面复制到自己项目

#### script ####

主要就是导入组件，可以在uni-app里面导入thorUI项目，然后复制他的组件到自己的项目就OK  
如此简单，上传组件就搞定！

import tuiUpload from '@/components/tui-upload/tui-upload'
    export default { 
    	components:{ 
    		tuiUpload,
    	},
    	data() { 
    		return { 
    			serverUrl:this.api.API_ROOT+"user/upload/one", //API_ROOT 就是域名+api 
    		}
    	},
    	methods:{ 
    		result: function(e) { 
    			this.goods.thumbnail = e.imgArr;
    		},
    		remove: function(e) {  
    			//移除图片 
    			console.log(e)
    			let index = e.index
    		},
    	}
    }

### ThinkCMF 上传方法 ###

这个上传方法是ThinkCMF自带的，所以上面的上传路由可以跟我一样 user/upload/one

/** * @throws \think\db\exception\DataNotFoundException * @throws \think\db\exception\ModelNotFoundException * @throws \think\exception\DbException */
    public function one()
    { 
        if ($this->request->isPost()) { 
            $uploader = new Upload();
    
            $result = $uploader->upload();
    
            if ($result === false) { 
                $this->error($uploader->getError());
            } else { 
                $result['preview_url'] = cmf_get_image_preview_url($result["filepath"]);
                $result['url']         = cmf_get_image_url($result["filepath"]);
                $result['filename']    = $result["name"];
                $this->success('上传成功!', $result);
            }
        }
    }

[ThorUI]: https://thorui.cn