前言
之前的文章讲得太多安装了，今天就不说这个了，因为我的项目是前后端分离的，所以基本是分开执行代码逻辑。其中还有跨域问题，主要还是在laravel中添加头信息放行之类的，这里会提一下做法。
element-ui的upload组件
我的vue代码：
<template>
<el-upload
:action="uploadAction"
list-type="picture-card"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="handleBefore"
:file-list="files">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog v-model="dialogVisible" size="tiny">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</template>这里说一下 on-preview与on-success都可以拿到服务器的返回路径
其中:action=”uploadAction”是服务器接引地址, list-type为限制上传格式
而:on-remove=”handleRemove”为移除图片时对应的方法,:before-upload=”handleBefore”
为上传前的操作，这里我用于限制上传的数量限制， :file-list=”files”上传后数据绑定在这里
这里我是使用:on-success=”handleSuccess”来拿服务器的返回数据的
在
export default {
data(){
return {
files: [],
uploadAction:'http://服务器地址'
}
},
methods: {
handleSuccess(response){
console.log(response)
this.files = [{name: response.name, url: imgBaseUrl + response.photo}] },
handleBefore(){
return this.files.length === 1 ? false : true // 只让它上传一张
},
handleRemove(file, fileList) {
console.log(file, fileList)
}
}
}
laravel跨域
laravel跨域需要添加一个中间件
在app/Http/middleware下 新建文件Cors.php,输入
namespace AppHttpMiddleware;use Closure;
class Cors
{
/**
* Handle an incoming request.
*
* @param IlluminateHttpRequest $request
* @param Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
return $next($request);
}
}
在appHttpKernel.php
添加
protected $routeMiddleware = [
// some class
'cors' => AppHttpMiddlewareCors::class,
