基于vue的图片裁剪插件vue-cropper ，上传图片到腾讯云存储
- 2020 年 3 月 11 日
- 筆記
网上找了点教程，结合之前框架里就有的修改了一下，没做细节优化处理
demo 16:9的尺寸，自己可以修改
步骤：
npm install vue-cropper
组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, },
<!--截图start--> <CutImages ref="cutStatus" :option="option" v-on:updateBaseimg="updateBaseimg"/> <!--截图end-->
使用方法 具体看下面
<template> <div> <div class="intro-upload-img"> <a href="javascript:;" class="file"> <div v-if="!moreSet.imageUrl">上传</div> <div v-if="moreSet.imageUrl" class="upload-img-url"> <img :src="moreSet.imageUrl"/> </div> <input type="file" @change="fileUpload($event)"> </a> </div> <CutImages ref="cutStatus" :option="option" v-on:updateBaseimg="updateBaseimg"/> <!--截图end--> </div> </template> <script> import CutImages from "@/components/cut"; import COS from 'cos-js-sdk-v5' //存储桶 export default { components: { CutImages }, name: "index", data() { return { showCut: false,//截图插件的弹窗 option: { //配置文件 img: '', info: true, size: 1, outputType: 'jpeg', canScale: true, autoCrop: true, // 只有自动截图开启 宽度高度才生效 autoCropWidth: 300, autoCropHeight: 250, fixed: true, // 真实的输出宽高 infoTrue: true, fixedNumber: [16, 9] }, //更多设置 moreSet: { imageUrl: '', }, cosData: {}, //存储桶 classid: '',//课堂id } }, created() { }, methods: { /** * 获取截图的文件对象 * 进行图片上传到腾讯云 * **/ updateBaseimg(event) { let _this =this _this.showCut = false //隐藏截图插件 if (!event) return _this.initCallBack() const time = _this.getTime() this.cosData.putObject({ Bucket:bucket, /* 必须 */ Region:region, /* 必须 */ Key: 'classroom/' + time + '/' + event.name, /* 必须 */ StorageClass: 'STANDARD', Body: event, // 上传文件对象 onProgress: function (progressData) { // console.log(JSON.stringify(progressData)) } }, function (err, data) { _this.moreSet.imageUrl = 'http://' + data.Location }); }, /** * 设置图片上传 * 获取文件对象,调用截图插件 * **/ fileUpload(event) { let _this = this _this.$refs.cutStatus.getFileInfo(event) }, } } </script> <style lang="less" scoped> </style>
组件：
<template> <div class> <el-dialog title="编辑图片" :visible.sync="showCut" :before-close="close" :width="'832px'" :close-on-click-modal="false"> <div> <div style="width: 800px;height: 600px"> <vueCropper ref="cropper" :img="option.img " :outputSize="option.size" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :enlarge="4"></vueCropper> </div> </div> <div slot="footer" class="dialog-footer"> <el-button @click="close" size="small">取 消</el-button> <el-button type="primary" @click="submit" size="small">确 定</el-button> </div> </el-dialog> </div> </template> <script> import {VueCropper} from "vue-cropper"; export default { components: {VueCropper}, props: ["option"], data() { return { filename:'', //图片名称 showCut:false,//弹窗 }; }, computed: {}, watch: {}, methods: { /** * 获取文件对象 * **/ getFileInfo(e) { this.showCut = true this.option.img = '' this.filename = e.target.files[0].name var file = e.target.files[0] 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 data = e.target.result if (typeof e.target.result === 'object') { // 把Array Buffer转化为blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])) } else { data = e.target.result } this.option.img = data } // 转化为base64 // reader.readAsDataURL(file) // 转化为blobcs reader.readAsArrayBuffer(file) }, /** * 提交 * data:是文件对象 * dataURLtoFile:base64转文件 * **/ submit() { this.$refs.cropper.getCropData((data) => { const info = this.dataURLtoFile(data,this.filename) this.$emit("updateBaseimg",info); this.showCut = false }) }, /** * base64转文件 * @param dataurl:图片的链接或者base64,filename:图片的名称 * **/ dataURLtoFile(dataurl, filename) { var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); }, /** * 关闭弹窗 * **/ close() { this.showCut = false this.option.img = '' }, // getBase64() { // this.$refs.cropper.getCropData(data => { // const formData = new FormData(); // formData.append("file", this.dataURLtoFile(data, "123.jpeg")); // formData.append("category", this.option.category); // fileupload(formData).then(res => { // this.$emit("updateBaseimg", { // url: res, // key: this.option.key // }); // this.$notify({ // type: "success", // message: "上传成功", // title: "提示" // }); // }); // }); // }, }, created() { }, mounted() { } }; </script> <style lang='less' scoped> </style>
