uniapp(uview组件库)文件上传功能 --通用篇 (带php laravel 接收数据 入库 等操作)
今天 自学了一下php 的laravel框架 写到一个文件上传功能 琢磨了好几个小时(php小白)首先说明 这是前后端分离开发的一个小demo前端(uniapp{使用了uview组件库}) 后端(php laravel框架)前端写法使用了uview里面的upload组件然后一个点击事件 触发 调用接口后端写法(接收数据)前端代码:<template><view class="re
·
今天 自学了一下php 的laravel框架 写到一个文件上传功能 琢磨了好几个小时(php小白 基础基础基础基础基础)
首先说明 这是前后端分离开发的一个小demo
前端(uniapp{使用了uview组件库}) 后端(php laravel框架)
总结:这个文件上传需要的数据是
headers: { 'Content-Type': 'multipart/form-data' }
意思就是 formdata格式 要不然后端request是接收不到数据的
我的引入的这个组件呢 自己就是formdata格式 如下图:
如果你不用组件的话 就要设置请求头 然后把数据转换成formdata格式 这个自行百度
前端写法
使用了uview里面的 upload组件
然后一个点击事件 触发 调用接口
后端写法(接收数据)
前端代码:
<template>
<view class="release">
<u-navbar title="发布商品" :background="background"></u-navbar>
<form :model="form" @submit="submit" @reset="" enctype="multipart/form-data">
<view class="upload">
<u-input v-model="form.introduce" type="textarea" :border="border" :placeholder="placeholder" :height="height"
:auto-height="autoHeight" />
<u-upload :form-data="form" :action="action" ref="uUpload" :auto-upload="false" :file-list="fileList" :max-size="1 * 1024 * 1024"
max-count="1"></u-upload>
</view>
<view class="content">
<u-input v-model="form.title" type="input" placeholder="请输入商品名称" :border="border" />
<view class="" style="border-top: 1PX solid #d6d6d6;">
<u-input v-model="form.price" type="number" placeholder="请输入商品价格" :border="border" />
</view>
</view>
<view class="btn">
<u-button shape="circle" type="error" @click="submit">发布</u-button>
</view>
</form>
<u-toast ref="uToast" />
</view>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
background: {
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
},
form: {
},
action: "http://127.0.0.1:8000/add/shops",
border: false,
height: 100,
autoHeight: true,
placeholder: "简要描述商品的入手渠道、新旧程度、转手原因",
fileList: [],
}
},
methods: {
// 提交数据
submit() {
this.$refs.uUpload.upload();
this.$refs.uToast.show({
title: '添加成功',
type: 'success',
})
}
}
}
</script>
<style lang="less">
page {
background: #ededed;
}
.release {
.btn {
position: fixed;
left: 0;
right: 0;
bottom: 20rpx;
}
.upload {
padding: 0 10rpx;
background-color: #ffffff;
}
.content {
padding: 0 10rpx;
margin-top: 40rpx;
background-color: #ffffff;
}
}
</style>
后端代码
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Shop;
use Illuminate\Support\Facades\DB;
class ShopController extends Controller
{
public function add(Request $request)
{
$file = $request->file("file"); //获取图片全部信息
$ext = $file->getClientOriginalExtension(); //获取后缀
$res = time() . rand() . '.' . $ext; //当前时间加一个随机数
$img = './uploads/' . $res; //拼接路径
$file->move('./uploads',$img ); //移动到指定的文件夹
$arr = array(
[
'pid' => 1,
'title' => request('title'),
'imges' => $img,
'price' => request('price'),
'introduce' => request('introduce')
]
);
$res = DB::table('shops')->insert($arr); //入库
if ($res) {
return response()->json([
'error' => 0,
'msg' => 'success',
'data' => $arr
]);
} else {
return response()->json([
'error' => 1,
'msg' => 'success',
'data' => null
]);
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)