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


Posted in Vue.js onMay 27, 2021

本文实例为大家分享了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("上传图片失败");
  }
 }

结束

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

Vue.js 相关文章推荐
vue动态设置路由权限的主要思路
Jan 13 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 #Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
Vue实现动态查询规则生成组件
详解vue身份认证管理和租户管理
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
vue debug 二种方法
2018/09/16 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
为什么python比较流行
2020/06/19 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
给女儿的表扬信
2014/01/18 职场文书
高三家长寄语
2014/04/03 职场文书
大学生赌博检讨书
2014/09/22 职场文书
小学生暑假生活总结
2015/07/13 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android