专栏首页技术分享文章基于vue的图片裁剪插件vue-cropper ,上传图片到腾讯云存储

基于vue的图片裁剪插件vue-cropper ,上传图片到腾讯云存储

网上找了点教程,结合之前框架里就有的修改了一下,没做细节优化处理

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue-WebSocket的使用

    〆 千寻、
  • 最新elementui,el-data-picker回显修改不了,或回显不上的解决办法

    看了网上的文档,要么不全,要么不管用,麻烦,废话不多,直接上代码,如果不满足你的需求的话,自行修改,introForm的定义请自行定义,应该可以看得懂。

    〆 千寻、
  • 最新elementui,el-data-picker回显修改不了,或回显不上解决办法

    看了网上的文档,要么不全,要么不管用,麻烦,废话不多,直接上代码,如果不满足你的需求的话,自行修改

    〆 千寻、
  • layui 下拉列表触发事件 获取自定义属性

    泥豆芽儿 MT
  • K60平台智能车开发工作随手记

    俺踏月色而来
  • 分页

    菜的黑人牙膏
  • C++ gcc编译过程

    第一步:预处理 将源代码的.c 、.cpp 、.h 等文件包含到一个文件中。在这个过程中会使用一些预处理指令要求编译器使用什么样的方式包含这些文件。预处理结束之...

    老九学堂-小师弟
  • AndroidStudio自带模拟器不能上网问题解决 Mac

    最近因为疫情在家办公,而且Android手机并不在身边,用模拟器比较多,但是最近模拟器一直连不上网很是蛋疼。

    Jingbin
  • Servlet 详解

    1.什么是Servlet Servlet 运行在服务端的Java小程序,是sun公司提供一套规范(接口),用来处理客户端请求、响应给浏览器的动态资源。但serv...

    用户5927264
  • Android开发-模拟器的使用-02

    我们开发的Android程序是放在移动设备(如:手机,平板电脑等)上面运行的,我们不可能每次编写一个程序都要放到移动设备上面去测试运行。这样是很不方便的。另外,...

    Hongten

扫码关注云+社区

领取腾讯云代金券