thorui开发-如何上传图片以及代码解析

实现的效果

解析

前端代码解析

代码在下面,自己查看,这里主要说一下最主要的几点

thorui给我们封装了丰富的组件

在这里我们主要设置几个变量就可以

value 设置默认值, 这里数据类型是数组

limit 图片的数量

serverUrl 上传的url地址

@complete 回调方法

更多属性可参考官网 https://thorui.cn/doc/docs/thorui/tui-upload.html

我们这里用到这三个值就足够了

上传处理

上传就是普通的图片上传,只要注意下上传后的返回格式就可以

code 状态码

msg

url 图片链接

return json_encode(['code'=>100,'msg'=>'成功','url'=>$msg]);

其他的也没什么要注意的,下面提供下部分代码

thorui代码

页面部分代码

<tui-upload :value="other_hxt" limit=1 :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>

js部分代码

export default {
		data() {
			return {
				serverUrl:'https://*****.com/upload_hxt',
				value:[]
			}
		},
		onLoad: function(options) {
			let postData = {}
			this.tui.request("/yusuan_ini", "GET", postData, false,false,  true).then((res) => {
				if (res.result == 1) {
					this.other_hxt=[res.msg]
				}
			}).catch((res) => {
			})
		},
		methods: {
			// 上传图片回调
			result:function (e) {
				console.log(e)
				if(e.status==1){
					this.other_hxt =e.imgArr
				}

			}

		}
	}

tp5.1代码

上传的方法

public function upload_hxt(){
        $file = request()->file('file');
        $info = $file->validate(['ext'=>config()['web']['file_ext']])->move('./public/upload/admin/file');
        $getSaveName = str_replace('\\', '/', $info->getSaveName());//win下反斜杠替换成斜杠
        $msg = 'https://'.$_SERVER['SERVER_NAME'].'/public/upload/admin/file/'.$getSaveName;
        return json_encode(['code'=>100,'msg'=>'成功','url'=>$msg]);
    }

> 本文由<子枫内容系统> 发布！