Vue两种方法上传图片，选择文件上传或复制粘贴上传

本文介绍了使用Vue.js实现两种图片上传方式：一是通过选择本地图片文件进行上传；二是支持用户通过截屏后复制并粘贴图片进行上传。详细讲解了实现过程。

摘要由CSDN通过智能技术生成

一、选择图片文件上传

 <div class="col-md-12">
       <el-form-item label="菜品图片:">
           <el-upload
               class="avatar-uploader"
               list-type="picture-card"
               action="/admin/uploads/posts"
               :show-file-list="false"
               :on-success="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload">
               <img v-if="cantForm.pic_url" :src="cantForm.pic_url" class="avatar" width="100%">
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
       </el-form-item>
   </div>

    //上传
    $router->group(['prefix' => 'uploads'], function ($router) {
   
        $router->post('uploads_bases',UploadController::class.'@uploads_bases');
        $router->post('uploads_bases64',UploadController::class.'@base64_image_content');
        $router->post('posts', UploadController::class.'@upload_ajax_file');

    });

   public function uploads_bases(Request $request){
   
       header('Access-Control-Allow-Origin: *');
       if (!empty($request->file('files'))){
   
           $tmp = $request->file('files');
           $path = '/uploads';
           if ($tmp->isValid()) {
    //判断文件上传是否有效
               $FileType = $tmp->getClientOriginalExtension(); //获取文件后缀
               $FilePath = $tmp->getRealPath(); //获取文件临时存放位置
               $FileName = 'tmp/'.date('Y-m-d') .'/'. uniqid() . '.' . $FileType; //定义文件名
               Storage::disk('admin')->put($FileName, file_get_contents($FilePath)); //存储文件
               $img  = $path . '/' . $FileName;
           }
       }else{
   
           $img = isset($request->goods_img)?$request->goods_img:'';
       }
       // 转换 Hash码
       $img1 = '.'.$img;
       $aHash = ImageHash::hashImageFile($img1);
       return response()->json(['status'=>100,'message'=>'上传完成','images'=>$img,'aHash'=>$aHash]);
   }