文件上传(WebUploader)成功之前自定义裁剪(vue-img-cutter)，上传裁剪的图片，并兼容ie

最新推荐文章于 2024-09-03 07:21:21 发布

小七:

最新推荐文章于 2024-09-03 07:21:21 发布

阅读量558

点赞数 1

分类专栏：裁剪兼容ie 上传文章标签： vue.js edge javascript

本文链接：https://blog.csdn.net/xyqseven/article/details/118408434

版权

本文介绍了如何使用Vue.js和WebUploader组件实现图片裁剪及上传功能。通过引入vue-img-cutter进行图片裁剪，然后将裁剪后的Base64Url转换为Blob文件并添加到WebUploader的上传队列中。详细步骤包括初始化上传组件、裁剪图片、文件格式和大小校验、上传成功回调等。示例代码展示了关键配置和事件监听。

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

上传文件使用的是WebUploader，可分片、并发、文件体积大时支持MD5秒传
地址：http://fex.baidu.com/webuploader/
思路：初始化上传组件，使用vue-img-cutter的裁剪；在裁剪成功之后；为兼容ie, 将裁剪获得的base64Url格式的图片地址转成bolo文件，追加到上传队列之中；调用上传方法继续进行上传，以确保上传的是裁剪后的图片
使用方法：
第一步：先引用webuploader.js，建议下载下来放在本地直接使用
安装依赖vue-img-cutter并引用
第二步：初始化webUploader
代码如下

<template>
  <div class="logoF1 fl">
    <div>
      <ImgCutter @cutDown="cutDown" label="上传LOGO"
        :cutWidth="180"
        :cutHeight="40"
        :moveAble="true"
        :sizeChange="false"
        WatermarkText=""></ImgCutter>
     </div>
     <div class="upload-wrap" v-show="false">
       <div id="uploader" class="wu-example">
          <div class="btns">
             <div id="picker" class="up-btn">上传LOGO</div>
             </div>
          </div>
      </div>
    </div>
  </div>
</template>
import ImgCutter from 'vue-img-cutter'
import webuploader from '@/utils/webuploader.js'
export default {