vue element+vue-cropper(图片剪裁+上传服务器)

1.预览效果

官网地址可以去看看里面的介绍:https://github.com/xyxiao001/vue-cropper

1.先在项目中安装一下

方法1：npm install vue-cropper

方法2：yarn add vue-cropper

2.安装成功在项目中的main.js引入

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)  //方便我们直接用

3.我们最好把这个封装成一个组件 这样的话在其他页面都能用

组件：YUploadImg

<template>
  <el-dialog title="图片剪裁" width="630px" :visible.sync="dialogVisible" append-to-body>
    <div class="cropper-content">
      <div class="cropper" style="text-align: center">
        <!-- 这个组件vueCropper就是我们刚才引入在main.js里面的那个 直接拿来用 就好 -->
        <vueCropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType" :info="true" :full="option.full" :can-move="option.canMove" :can-move-box="option.canMoveBox" :original="option.original" :auto-crop="option.autoCrop" :fixed="option.fixed" :fixed-number="option.fixedNumber" :center-box="option.centerBox" :info-true="option.infoTrue" :fixed-box="option.fixedBox" />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button>
        <el-upload class="avatar-uploader" list-type="picture" action="" :auto-upload="false" :show-file-list="false" :on-change="changeUpload">
          <i class="el-icon-refresh" style=" margin-right: 5px;" />换图片
        </el-upload>
      </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="finish">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import axios from 'axios'  //你们有封装接口了的 就直接用你们封装的方法来写 我这里是为了做样式 就直接用了axios请求
export default {
  data() {
    return {
      dialogVisible: false,
      // 这都是需要用到的参数看个人需求 用不到的可以删除  可以去官网参考一下
      option: {
        name: '',
        img: '', 
        info: true,
        outputSize: 1, 
        outputType: 'png',
        canScale: false,
        autoCrop: true, 
        fixedBox: false, 
        fixed: true, 
        fixedNumber: [300, 170],
        full: true, 
        canMoveBox: true, 
        original: false, 
        centerBox: false, 
        infoTrue: true, 
      },
    }
  },
  mounted() {
  },
  methods: {
    changeUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isJPG = testmsg === 'jpg'
      const isPNG = testmsg === 'png'
      if (!isJPG && !isPNG) {
        this.$message.error('上传封面图片只能是 JPG 或 PNG 格式!');
        return
      }
      this.$nextTick(() => {
        this.option.img = file.url
        this.option.name = file.name
        this.dialogVisible = true
      })
    },
    finish() {
      this.$refs.cropper.getCropBlob(async (data) => {
        let file = new FormData() //转formData格式 因为我们获取的是blob类型 我后端只支持文件类型所以转了 如果你们后端什么格式都接受 这里就不用走了
        var abc = new File([data], this.option.name, { type: "image/jpg", });
        file.append('file', abc)
        axios.post('这里是你要上传服务器的地址', file, { headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'token': '这里是token  后端需要的话就带 不需要这个可以删掉' } }).then(res => {
          console.log(res);//后端返回来的图片地址
          this.dialogVisible = false
        })
      })
    },
  }
}
</script>

<style scoped>
.cropper {
  width: 100%;
  height: 400px;
}
</style>

页面上使用：

<template>
  <div class="unload-box">
    <YUploadImg ref="YUploadImgref" />
    <!-- 这里是element的上传图片组件 需要加上on-change这个事件 我们就用他的选择图片操作 上传的操作我们就交给vue-cropper他来 -->
    <el-upload class="avatar-uploader" list-type="picture" action="" :auto-upload="false" :show-file-list="false" :on-change="changeUpload">
      <img :src="图片地址" class="avatar">
    </el-upload>
  </div>
</template>
<script>
import YUploadImg from '@/components/y-upload-img/index.vue'
export default {
  methods: {
    changeUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isJPG = testmsg === 'jpg'
      const isPNG = testmsg === 'png'
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
        return
      }
      this.$nextTick(() => { //一下操作是赋值给组件那边的
        this.$refs.YUploadImgref.option.img = file.url
        this.$refs.YUploadImgref.option.name = file.name
        this.$refs.YUploadImgref.dialogVisible = true
      })
    }
  }
}

</script>

溜啦溜啦