vue+cropperjs实现图片剪裁，上传七牛云

最新推荐文章于 2024-08-09 07:15:36 发布

zl_1992

最新推荐文章于 2024-08-09 07:15:36 发布

阅读量4.6k

点赞数

分类专栏： vue 文章标签： vue cropper 图片剪裁上传七牛云

本文链接：https://blog.csdn.net/qq_22753743/article/details/78841004

版权

该博客详细介绍了如何结合Vue和Cropperjs库来实现图片剪裁功能，接着将剪裁后的图片上传到七牛云存储，并获取图片的key和hash值。最后，将七牛云的图片地址发送到服务器进行保存。

摘要由CSDN通过智能技术生成

通过vue element UI 的upload组件，选择图片--进行图片剪裁--上传七牛云--获取图片key和hash--获取图片七牛云存储地址--上传地址到服务器。

父组件：

<template>
    <div class="upload-img">

        <h2>上传封面<span class="mark">上传视频缩略图封面，建议上传16:9的图片，仅支持JPEG,BMP,PNG格式，图像小于2M</span></h2>

        <div class="select-button clearfix">

        <el-upload :show-file-list="false" :auto-upload="false" :data="{token:token}" action="http://up-z2.qiniu.com/" :http-request="upload"  name="file" ref="coverImg"  list-type="picture-card" class="upload-plus clearfix" :on-change="handleChange" :on-preview="handlePictureCardPreview" :before-upload="handleBefore">

            <i class="el-icon-plus add-img">点击添加图片</i>

        </el-upload>
        <div class="file" v-if="showCover">
            <div class="file-box">
                <span class="tag" :style="{backgroundColor:tagObj.color}">{
  {tagObj.label}}</span>
                <img :src="item.coverUrl" alt="">
                <div class="cover-bar">
                    <a href="javascript:;" class="el-icon-view" @click="handleCheckView"></a>
                    <a href="javascript:;" class="el-icon-delete2" @click="handleDelete"></a>
                </div>
            </div>
        </div>
        <cropper :panel="panel" :url="url" v-if="panel" @handleShow="handleShow" @handleGetUrl="handleGetUrl" @upload="upload"></cropper>
        <el-dialog v-model="dialogVisible" size="tiny">

            <img width="100%" :src="dialogImageUrl" alt="">

        </el-dialog>

        </div>

    </div>
</template>
<script>
import url from '../urls/index'
import EditVideo from '../api/service/videoEdit'
import cropper from '@/components/common/cropper.vue'
    export default {

        data() {

            return {
                dialogImageUrl: '',//查看缩略图弹框的图片url
                dialogVisible: false,//查看缩略图弹框显示
                uploadUrl:'',//上传的url
                fileName:"",//文件名
                showCover:false,//上传缩略图成功控制是否显示
                // coverUrl:"" //上传成功后的url地址
                panel:false,
                url:''
            }

        },
        components: {
          cropper
        },
        computed:{
            item:{
                get:function(){
                    return JSON.parse(window.localStorage.getItem('item'))
                },
                set:function(value){
                    window.localStorage.setItem('item',JSON.stringify(value))
                }
            },
            tagObj:{
                get:function(){
                    return this.$store.getters.GET_TAG_OBJ
                },
                set:function(value){
                    this.$store.commit('UPDATE_TAG_OBJ',value)
                }
            },
            token:{
                get:function(){
                    return this.$store.getters.GET_TOKEN
                },
                set:function(value){