vue-cropper组件实现图片切割上传

本文实例为大家分享了vue-cropper组件实现图片切割上传的具体代码,供大家参考,具体内容如下

这几日,等来了些空闲,用vue和spring boot实践一次头像上传,因此记下了,望将来的开发有所帮助。

vue-cropper在vue中的引入

1、组件内引入

import { VueCropper }  from 'vue-cropper'
components: {
  VueCropper,
},

2、全局引入

在main.js中配置如下代码

import VueCropper from 'vue-cropper' 

Vue.use(VueCropper)

3、使用示例

vue文件

<template>
  <el-dialog
    title="编辑头像"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    append-to-body
  >
    <label class="btn" for="uploads">选择图片</label>
    <input
      type="file"
      id="uploads"
      :value="imgFile"
      style="position:absolute; clip:rect(0 0 0 0);"
      accept="image/png, image/jpeg, image/gif, image/jpg"
      @change="uploadImg($event, 1)"
    >
    <div style="margin-left:20px;">
      <div class="show-preview" :style="{'overflow': 'hidden', 'margin': '5px'}">
        <div :style="previews.div" class="preview" style="width: 40px;height: 40px;">
          <img :src="previews.url" :style="previews.img">
        </div>
      </div>
    </div>
    <div class="cut">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :fixedBox="option.fixedBox"
        @realTime="realTime"
        @imgLoad="imgLoad"
      ></vueCropper>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="finish('blob')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from "vue-cropper";
export default {
  components: {
    VueCropper
  },
  data() {
    return {
      previews: {},
      model: false,
      modelSrc: "",
      fileName: "",
      imgFile: "",
      dialogFormVisible: false,
      option: {
        img: "",
        outputSize: 1, //剪切后的图片质量(0.1-1)
        full: false, //输出原图比例截图 props名full
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 40,
        autoCropHeight: 40,
        fixedBox: true
      }
    };
  },
  methods: {
    //上传图片(点击上传按钮)
    finish(type) {
      let selft = this;
      let formData = new FormData();
      // 输出
      if (type === "blob") {
        selft.$refs.cropper.getCropBlob(data => {
          let img = window.URL.createObjectURL(data);
          selft.model = true;
          selft.modelSrc = img;
          formData.append("file", data, selft.fileName);
          selft.$api.writer.userUpload(formData, r => {
            if (r.code) {
              selft.$alert.error(r.msg);
            } else {
              selft.$message({
                message: r.data.msg,
                type: "success"
              });
              selft.$store.state.userInfo = r.data.data;
              selft.dialogFormVisible = false;
            }
          });
        });
      } else {
        this.$refs.cropper.getCropData(data => {});
      }
    },
    //选择本地图片
    uploadImg(e, num) {
      console.log("uploadImg");
      var selft = this;
      //上传图片
      var file = e.target.files[0];
      selft.fileName = file.name;
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      var reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        if (num === 1) {
          selft.option.img = data;
        } else if (num === 2) {
          selft.example2.img = data;
        }
      };
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file);
    },
    show() {
      this.dialogFormVisible = true;
    },
    // 实时预览函数
    realTime(data) {
      console.log("realTime");
      this.previews = data;
    },
    imgLoad(msg) {
      console.log("imgLoad");
      console.log(msg);
    }
  }
};
</script>

<style lang="less">
@import "./userLogo.less";
</style>

less文件

.cut {
    width: 300px;
    height: 300px;
    margin: 0px auto;
}

.hh {
    .el-dialog__header {
        padding: 0px;
        line-height: 2;
        background-color: #f3f3f3;
        height: 31px;
        border-bottom: 1px solid #e5e5e5;
        background: #f3f3f3;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .el-dialog__title {
        float: left;
        height: 31px;
        color: #4c4c4c;
        font-size: 12px;
        line-height: 31px;
        overflow: hidden;
        margin: 0;
        padding-left: 10px;
        font-weight: bold;
        text-shadow: 0 1px 1px #fff;
    }
    .el-dialog__headerbtn {
        position: absolute;
        top: 8px;
        right: 10px;
        padding: 0;
        background: 0 0;
        border: none;
        outline: 0;
        cursor: pointer;
        font-size: 16px;
    }
}

.btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c0ccda;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    //margin: 20px 10px 0px 0px;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all 0.2s ease;
    text-decoration: none;
    user-select: none;
}

.show-preview {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    .preview {
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #cccccc;
        background: #cccccc;
    }
}

发送请求的时候配置axios的Content-Type

// http request 拦截器
axios.interceptors.request.use(
  config => {debugger
    let token = sessionStorage.getItem('token')
    if (token) {
      config.headers.Authorization = token;
    }
    if (config && config.url && config.url.indexOf('upload') > 0) {
      config.headers['Content-Type'] = 'multipart/form-data'
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

boot的controller

@RequestMapping("/upload")
 public ResultData upload(@RequestParam("file") MultipartFile file) {
  return userService.upload(file);
 }

boot的service

@Override
 public ResultData upload(MultipartFile file) {
  if (!file.isEmpty()) {

   StringBuffer requestURL = sessionUtil.getRequestURL();
   int end = requestURL.indexOf("/user/upload");
   String basePath = requestURL.substring(0, end);
   String savePath = basePath + "/static/img/logo/";
   // 获取文件名称,包含后缀
   String fileName = file.getOriginalFilename();

   String saveDbPath = savePath + fileName;

   // 存放在这个路径下:该路径是该工程目录下的static文件下:(注:该文件可能需要自己创建)
   // 放在static下的原因是,存放的是静态文件资源,即通过浏览器输入本地服务器地址,加文件名时是可以访问到的
   String path = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/img/logo/";

   // 该方法是对文件写入的封装,在util类中,导入该包即可使用,后面会给出方法
   try {
    FileUtil.fileupload(file.getBytes(), path, fileName);
    // 接着创建对应的实体类,将以下路径进行添加,然后通过数据库操作方法写入
    User user = sessionUtil.getSessionUser();
    user.setLogo(saveDbPath);
    User whereUser = new User();
    whereUser.setId(user.getId());
    ConfigHelper.upate(user, "user", whereUser);
    Map<String, Object> map = new HashMap<>();
    map.put("msg", "头像修改成功");
    map.put("data", user);
    return ResultData.ok(map);
   } catch (IOException e) {
    log.error("图片上传==》" + e.getMessage());
    e.printStackTrace();
    return ResultData.failed(e.getMessage());
   } catch (Exception e) {
    log.error("图片上次==》" + e.getMessage());
    e.printStackTrace();
    return ResultData.failed(e.getMessage());
   }

  } else {
   return ResultData.failed("上传图片失败");
  }
 }

结束

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • cropper js基于vue的图片裁剪上传功能的实现代码

    前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下.原文:http://www.jb51.net/article/135719.htm 首先下载引入cropper js, npm install cropper js --save 在需要的页面引入:import Cropper from "cropper js" html的代码如下: <template> <div id="demo&quo

  • vue.js 实现图片本地预览 裁剪 压缩 上传功能

    以下代码涉及 Vue 2.0 及 ES6 语法. 目标 纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &

  • vue+element实现图片上传及裁剪功能

    本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码,供大家参考,具体内容如下 随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化 1 .安装 vue-cropper npm install vue-cropper 2.组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 具体可见官网 demo <template> <div> <h1&

  • vue实现移动端图片裁剪上传功能

    本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下 1. 安装cropperjs依赖库 npm install cropperjs 2. 编写组件SimpleCropper.vue <template> <div class="v-simple-cropper"> <slot> <button @click="upload">上传图片</button> </slot>

  • vue 图片裁剪上传组件的实现

    先看一下总体效果: 上传文件做了大小和类型的限制,在动图中无法展现出来. 使用file类型的input实现选择本地文件 但是浏览器原生的文件上传按钮的颜值不尽人意,而且按钮上的文字是无法改变的,我需要把这个上传文件的按钮改造一下. 方法1:使用label元素来触发一个隐藏的file类型的 input元素:(缺点:在多人开发时,可能出现重复的元素id,导致难以预料的bug) <input type="file" id='up_file_input' v-show='false' &

  • vue实现图片裁剪后上传

    本文实例为大家分享了vue实现图片裁剪后上传的具体代码,供大家参考,具体内容如下 一.背景 目前负责的系统(商城后台管理系统)里面有这么一个需求,为了配合前台的展示,上传的商品图片比较必须是1:1的正方形.(其它地方有时会有5:4或者16:9的需求,但较少).所以需要对上传的图片先进行裁剪,并且按要求只能裁剪为1:1,然后在进行上传. 当然,为了兼容系统其它地方有5:4或者16:9的图片比例需求,需要给出一个参数,可以随时控制图片裁剪的比例. 二.使用什么插件实现 使用 vue-cropper

  • vue-cropper组件实现图片切割上传

    本文实例为大家分享了vue-cropper组件实现图片切割上传的具体代码,供大家参考,具体内容如下 这几日,等来了些空闲,用vue和spring boot实践一次头像上传,因此记下了,望将来的开发有所帮助. vue-cropper在vue中的引入 1.组件内引入 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 2.全局引入 在main.js中配置如下代码 import VueCropper from 'v

  • Vue使用canvas实现图片压缩上传

    本文实例为大家分享了Vue使用canvas实现图片压缩上传的具体代码,供大家参考,具体内容如下 场景:如用户头像等 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 2.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的(但是我用单反拍了个头像,照片超过2M很正常,要对图片进行处理才能上传).如果可

  • vue-cropper插件实现图片截取上传组件封装

    基于vue-cropper插件实现图片截取上传组件封装的具体代码,供大家参考,具体内容如下 需求场景: 后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用Ant Design Vue组件库搭配vue-cropper插件进行封装 实现如下 html <template> <div> <a-upload name="avatar" list-type="picture-card" class="avatar-uplo

  • vue 实现剪裁图片并上传服务器功能

    预览链接点击预览 效果图如下所示,大家感觉不错,请参考实现代码. 需求 [x] 预览:根据选择图像大小自适应填充左侧裁剪区域 [x] 裁剪:移动裁剪框右侧预览区域可实时预览 [x] 上传&清空:点击确认上传裁剪图片,点击取消按钮清空图像 [ ] 裁剪框可调节大小 实现步骤 methods:funName() - 对应源码中methods中的funName方法 data:dataName - 对应源码中data中的dataName数据 1. 图片选择与读取 选择图片 :(methods:selec

  • Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

    使用教程(注意细看总结部分,写了几点,希望有所帮助): 1.安装插件:npm install vue-quill-editor 2.安装插件依赖:npm install quill 3.main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impor

  • Cropper.js 实现裁剪图片并上传(PC端)

    由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比较完善的,所以结合之前的使用情况,编写了此案例.本案例是参考cropper站点实例,进行修改简化. option相关参数说明: viewMode 显示模式 Type: Number Default: 0 Options: 0: the crop box is just within the container 裁剪框只能在 1内移动 1: the crop

  • 基于vue+axios+lrz.js微信端图片压缩上传方法

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能按指定尺寸压缩处理 4.上传图片可以从相册中选择或者直接拍照 遇到的坑 采用微信JSSDK上传图片 在之前开发的项目中(mui + jquery),有使用过微信JSSDK的接口上传图片,本想应该能快速迁移至此项目.事实证明编程没有简单的事: 1.按指定尺寸压缩图片 JSSDK提供的接口wx.choo

  • vue+vux实现移动端文件上传样式

    样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file'  就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>

随机推荐