thinkcmf + uni-app 实现图片上传

说明

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

uni-app 页面

template

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

<view class="tui-box-upload">
	<tui-upload :serverUrl="serverUrl" :limit="3"  @complete="result" @remove="remove"></tui-upload>
</view>

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);
        }
    }
}