uniapp（uview组件库）文件上传功能 --通用篇 （带php laravel 接收数据 入库 等操作）

今天 自学了一下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
            ]);
        }
    }
}