vue-element+larke-admin上传多张图片(laravel)

1.vue中引用上传图片的组件

import ImageCropper from '@/components/ImageCropper'
components: {
    ImageCropper,
  },

2.data的设置：

magecropperShow: false,
data:{
    'address':''  //图片路径
}

3.组件：

<image-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="300"
      :height="300"
      field="file"
      url="upload/uploadPic?name=commodity"
      lang-type="zh"
      @close="close"
      @crop-upload-success="cropSuccess"
    />

<el-form-item :label="$t('图片')" prop="address">
      <!-- <pan-thumb :image="data.category_pic" /> -->
      <template v-for="item in (data.address||'').split(',')">
        <img v-image-preview :src="item" style="width:100px;" class="img">
        <i class="el-icon-delete" @click="deleteImg(item)" v-if="data.address"></i>
      </template>
      <el-button size="small" type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 20px;" @click="imagecropperShow=true">
        {{ $t('上传') }}
      </el-button>
      
    </el-form-item>

3.2 成功回调函数：

cropSuccess(resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      // console.log(this.data.address != null,'aa')
      // this.data.address= this.data.address+','+resData['url']
      if(this.data.address){
        this.data.address= this.data.address+','+resData['url']
      }else{
        this.data.address= resData['url']
      }
      console.log('上传头像的数据', resData)
      console.log('目前的数据',this.data)
    },

4.后台：

 4.1在vendor\lake\larke-admin\src\larke\resources\routes的admin.php中添加：

  4.2在vendor\lake\larke-admin\src\larke\admin\Controller\Upload.php中编辑

/**
     * 上传图片
     *
     * @title 上传图片
     * @desc 上传图片
     * @order 572
     * @auth true
     *
     * @param  Request  $request
     * @return Response
     */
    public function uploadPic(Request $request)
    {
        $requestFile = $request->file('file');
        // print_r($request->post());
        $dirName=$request->get('name');
        $totay=date('Y-m-d');
        if (empty($requestFile)) {
            return $this->error(__('上传文件不能为空2'));
            // return $this->success(__('上传文件成功'), '1');
        }
        
        // Pathname
        $pathname = $requestFile->getPathname();
        
        // 原始名称
        $name = $requestFile->getClientOriginalName();
        
        // mimeType
        $mimeType = $requestFile->getClientMimeType();
        
        // 扩展名
        $extension = $requestFile->extension();
        
        // 大小
        $size = $requestFile->getSize();
        
        $md5 = hash_file('md5', $pathname);
        
        $sha1 = hash_file('sha1', $pathname);
        
        $uploadService = UploadService::create();
        
        if ($uploadService === false) {
            return $this->error(__('上传文件失败'));
            
        }

        $uploadDisk = config('larkeadmin.upload.disk');
        
        $driver = $uploadDisk ?: 'local';
        
        $mimeType = $uploadService->getMimeType($requestFile);
        
        $filetype = $uploadService->getFileType($requestFile);
        
        $fileInfo = AttachmentModel::byMd5($md5)->first();
        if (!empty($fileInfo)) {

            @unlink($pathname);
            
            $fileInfo->update([
                'update_time' => time(), 
                'update_ip' => $request->ip(),
            ]);
            
            $res = [
                'id' => $fileInfo['id'],
            ];
            if (in_array($filetype, ['image', 'video', 'audio'])) {
                $res['url'] = $fileInfo['url'];
            }
            
            return $this->success(__('上传文件成功'), $res);
        }
        
        if ($filetype == 'image') {
            if($dirName){
                $uploadDir = config('larkeadmin.upload.directory.image').'/'.$dirName.'/'.$totay;
            }else{
                $uploadDir = config('larkeadmin.upload.directory.image').'/'.$totay;
            }
        } elseif ($filetype == 'video' || $filetype == 'audio') {
            if($dirName){
                $uploadDir = config('larkeadmin.upload.directory.media').'/'.$dirName.'/'.$totay;
            }else{
                $uploadDir = config('larkeadmin.upload.directory.media').'/'.$totay;
            }
        } else {
            $uploadDir = config('larkeadmin.upload.directory.file');
        }
        
        $path = $uploadService->dir($uploadDir)
            ->uniqueName()
            ->upload($requestFile);
        
        $adminId = app('larke-admin.auth-admin')->getId();
        $attachmentModel = AdminModel::where('id', $adminId)->first()->attachments();
        $attachment = $attachmentModel->create([
            'name' => $name,
            'path' => $path,
            'mime' => $mimeType,
            'extension' => $extension,
            'size' => $size,
            'md5' => $md5,
            'sha1' => $sha1,
            'driver' => $driver,
            'status' => 1,
        ]);

        
        if ($attachment === false) {
            $uploadService->destroy($path);
            return $this->success(__('上传文件成功'));
        }
        $res = [
            'id' => $attachment->id,
        ];
        if (in_array($filetype, ['image', 'video', 'audio'])) {
            $url = $uploadService->objectUrl($path);
            
            $res['url'] = $url;
        }
        
        // $res['name']=$name;
        return $this->success(__('上传文件成功'), $res);
    }

5.效果展示

 还有一个上传视频的功能，写出来以后再分享吧。

好菜，写不出来呜呜呜呜-_-

larke-admin资源可在github上面获得

自行搜索即可