vue多图片base64上传后端laravel接收
前言：学习笔记
1.基于element-ui的多文件上传并存于后端文件夹
这里我们需要用到element-ui中的upload上传upload组件
a：element-ui的安装与使用
(1) 在cmd的vue项目路径或Visual Studio Code的终端下执行 npm i element-ui -S指令
(2)在vue项目的main.js中添加下面代码
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
b:代码展示
关于upload组件属性的解释element-ui的文档中已经解释的很清楚这里就不在赘述。
<template>
<!-- 多文件上传存于本地文件 -->
<!-- name="swe"//默认值为file -->
<el-upload
class="upload-demo"
ref="upload"
action="/api/articleshow"//后端接收地址
name="swe"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="btsuccess"
:before-remove="beforeRemove"
:on-change="btnchange"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
:auto-upload="false">
<!-- :auto-upload="false"禁止自动提交 -->
<!-- slot="trigger" 避免点击上传到服务器打开上传文件界面 -->
<el-button slot="trigger"size="small" type="primary" >点击上传</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload><!-- multiple是否支持多选文件-->
</template>
<script>
export default {
data() {
return {
fileList:[]
// 一次提交不能有重复文件
};
},
methods: {
submitUpload() {
this.$refs.upload.submit();
},
btnchange:function(file,fileList){
console.log(fileList)
for(var i=0;i<fileList.length;i++)
{
for(var j=i+1;j<fileList.length;j++)
{
if(fileList[i]['name']===fileList[j]['name'])
{
this.$message.warning('该文件以选中');
fileList.pop(j)
}
}
}
},
btsuccess:function(response,file,fileList){
console.log(response)
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file)
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
}
}
</script>
c:后端laravel代码
所需知识：laravel的文件存储
在这里需要注意的是文件存储的配置与使用，我们可以自定义上传的文件路径。在config/filesystems.php中添加下面配置
public function articleShow(Request $request){
if ($request->isMethod('post')){
$file = $request->file('swe');
//判断文件是否上传成功
if ($file->isValid()){
// 原文件名
$originalName = $file->getClientOriginalName();
//扩展名
$ext = $file->getClientOriginalExtension();
//MimeType//类型
$type = $file->getClientMimeType();
//临时绝对路径
$realPath = $file->getRealPath();
$filename = uniqid().'.'.$ext;
$bool = Storage::disk('uploads')->put($filename,file_get_contents($realPath));
//判断是否上传成功
if($bool){
return json_encode(['res'=>'success']);
}else{
return json_encode(['res'=>'fail']);
}
}
}
}
2.vue多图片base64上传存于后端数据库
a.前端代码
关于base64图片的使用，直接src就好。
<template>
<!-- 多文件base64上传存于数据库 -->
<div>
<input v-on:change="uploadPhoto($event)" name="file[]" value="选择文件"type="file" multiple class="kyc-passin">
<img v-bind:src="src">
<button v-on:click="changeImg">显示</button>
</div>
</template>
<script>
import qs from 'qs'
export default{
data(){
return{
src: '',
imgcode: '',
imgList: [],
size: 0,
imgData: {
accept: 'image/gif, image/jpeg, image/png, image/jpg',
},
};
},
methods:{
uploadPhoto(e) {
if (!e.target.files[0].size) return;
let files = e.target.files;
// 批量上传
for (let i = 0; i < files.length; i++) {
// 单张上传
this.fileAdd(files[i]);
}
var params = new URLSearchParams();
params.append('piccode',JSON.stringify(this.imgList))//你要传给后台的参数值 key/value
params.append('kind','2')
params.append('username','SWE16081')
this.axios({
method: 'post',
url:'/api/inputfile',
data:params,
}).then((res)=>{
console.log(res.data);
});
console.log(this.imgList)
},
// 单张上传
fileAdd (file) {
// console.log(file);
let type=file.type;//文件的类型，判断是否是图片
let size=file.size;//文件的大小，判断图片的大小
//indexOf() 返回某个指定的字符在某个字符串中首次出现的位置。如果没有找到就返回-1；
if(this.imgData.accept.indexOf(type) === -1){
alert('请选择我们支持的图片格式！');
return false;
}
if(size > 3145728){
alert('请选择3M以内的图片！');
return false;
}
let that = this;
// 总大小
this.size = this.size + file.size;
let reader = new FileReader();
// 调用reader.readAsDataURL()方法，把图片转成base64
reader.readAsDataURL(file);
// 监听reader对象的onload事件，当图片加载完成时，把base64编码賦值给预览图片
reader.onload = function (e) {
file.src = e.target.result;
// 再把file对象添加到imgList数组
that.imgList.push(file);
}
},
changeImg:function(){
var self =this
this.axios.post('/api/getPicCode').then(function (response) {
self.src=response.data.piccode
}).catch(function (error) {
console.log(error);
});
}
}
}
</script>
<style scoped>
</style>
b:后端代码
controller
public function inputfile(Request $request)
{
if ($request->isMethod('post')){
$data=Input::all();
$picfile=new modelpic();
$res=$picfile->insert($data);
if($res){
return \GuzzleHttp\json_encode(['res'=>'true']);
}else{
return \GuzzleHttp\json_encode(['error'=>'404']);
}
}
}
Model
public function insert($data){
$picfile=new picfile();
$picfile->piccode=$data['piccode'];
$picfile->kind=$data['kind'];
$picfile->username=$data['username'];
$res=$picfile->save();
return $res;
}