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;
    }