解决Vue-cropper和mockjs不能一起使用的问题

最新推荐文章于 2023-04-04 14:22:54 发布
最新推荐文章于 2023-04-04 14:22:54 发布
阅读量587 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42805389/article/details/108227732
版权
本文介绍了在使用Vue-cropper进行头像裁剪时遇到与Mockjs不兼容的错误，通过查阅资料和理解错误信息，找到了ArrayBuffer类型数据对象导致的问题。通过调整处理方式，成功实现了两者的同时使用。
摘要由CSDN通过智能技术生成

好久没写博客了 我都快忘记markdown的用法了,好了 不扯了 直接切入正题

今天用vue-cropper做头像裁剪时 遇到一个问题,报错如下
Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of

然后我查了一下 发现时mockjs不能和vue-cropper一起混用 于是我就纳闷了 这二者为什么会有关系呢? 然后百度了好久 看完也是一脸懵逼 不过通过报错信息可以看出 它好像不能识别ArrayBuffer这种类型的数据对象,然后我看了一眼MDN

在这里插入图片描述
发现既然第一种方式不行 那么就换一种方式,那就通过第二种呗
于是代码如下

upload(e) {
最低0.47元/天 解锁文章
浮笙若有梦
关注
专栏目录
elementui结合vue-cropper实现裁剪和上传 多张图
weixin_41087144的博客
05-14 603
1.先安装vue-cropper npm install vue-cropper --save 2.页面引用 import { VueCropper } from 'vue-cropper' components: { VueCropper // 图片裁剪组件 }, 3.组件的使用 </template> <el-upload action="#" multiple :limit="3" list-type="picture-card" :auto-uplo
记录vue中Cropper.js裁切插件的使用
junyu1024的博客
03-30 1088
git地址：https://github.com/fengyuanchen/cropper 官方演示地址：https://fengyuanchen.github.io/cropper/ 1、下载：npm install cropperjs 2、main.js中引入：import Cropper from 'cropperjs' 3、初始化： <img src="https://fengyua...
vue-cropper：一个用于vue的简单图片剪辑插件
02-03
需要使用外层容器包裹并设置宽高 使用注意：需要关掉本地的mock服务，不然图片转换会报错 组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 import VueCropper from 'vue-cropper' Vue.use(VueCropper) cdn方式使用 [removed][removed] Vue.use(window['vue-cropper'].default) nuxt 使用方式 if(process.browser) { vueCropper = require('vue-cropper') Vue.use(vueCropper.default) } < vueCropper ref =" cropper " :img =" option.img " :outputSize =" option
Vue项目中使用图片裁切器 cropperjs (头像裁切)
zep
06-28 2636
cropperjs官方文档 cropperjs结合element-ui 组件后的显示效果: 1. npm 安装 cropperjs cmd命令行输入：npm install cropperjs --save 2. 导入相关js和css文件 import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs' 3. 用块元素（容器）包裹图像或画布元素 4. 设置样式，确保图像的大小完全铺满容器 5. 初始化裁切器 <te.
使用vue-cropper实时预览发现的坑
写点什么好
01-30 1660
实时预览：https://blog.csdn.net/wexin_37276427/article/details/105354171 在项目中怎么都实现不了实时预览， 一直报了这个错误，怎么解决也没解决掉。 然后后面才意识到，原来我在做word导出的时候也遇见过。主要的原因是项目中使用mock.js，导致fs模块不能正常使用。 去main.js把mock注释掉就可以了回复正常了。 ...
vue-cropper 使用demo。 基于 vue3，实现 旋转，缩放，控制裁剪，选择阈值，上传图片等功能。
03-18
使用 vue-cropper + vue3 + typescript + element-plus 1. 主要组件 vue-cropper 2. ui组件基于element-plus 3. 开发框架 基于vue 3.2
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件
02-06
Vue头像作物 :girl: 一个简单而优雅...$ npm i vue-avatar-cropper 用法 < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ uploaded = " handleUploaded " tri
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
04-29
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
vue裁剪组件vue-cropper
weixin_43923808的博客
08-03 3867
3. cropMoving 截图框移动回调函数。2.imgMoving 图片移动回调函数。1. realTime 实时预览事件。获取截图的 base64 数据。需要使用外层容器包裹并设置宽高。获取截图的 blob 数据。
vue项目使用element-ui组件上传文件报错upload.addEventListener is not a function Mock数据报错的解决方案
qq_53979100的博客
04-04 1924
需要查找文件node_modules/mockjs/dist/mock.js以及node_modules/mockjs/src/mock/xhr/xhr.js。主要是因为mockjs改动了axios里面XMLHttpRequest对象从而导致报错。就是给MockXMLHttpRequest对象添加一个原生xhr.upload方法。找到后打开文件大约在8312行和216行的位置添加以下代码。
Failed to execute ‘readAsArrayBuffer‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘
热门推荐
xiao_cheng_的博客
11-10 1万+
Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type ‘Blob’ 在vue中使用FileReader时遇到Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type 'Blob’的报错，尝试了new Int8Array、readAsArrayBuffer等方式却依旧没有解决。多次调试后发现是因为
yarn 编译环境时遇到的问题和解决方法
qq_42598902的博客
09-06 1455
这里写自定义目录标题前端环境可能出现的问题使用 yarn 安装时，报错node_modules\node sass:Command failed'cross-env' 不是内部或外部命令，也不是可运行的程序 前端环境可能出现的问题 使用 yarn 安装时，报错node_modules\node sass:Command failed npm install -g mirror-config-china --registry=http://registry.npm.taobao.org npm install
uniapp使用better-mock在小程序端模拟数据
q850593913的博客
06-21 3882
初始化项目 在uniapp项目目录下 npm init 安装better-mock 官方文档 npm install better-mock 新建文件 新建mock文件夹 mock文件夹下新建index.js 小程序平台要引入dist/mock.mp.js const Mock = require('better-mock/dist/mock.mp.js') 根据数据模板生成模拟数据 const Mock = require('better-mock/dist/mock.mp.js') M
npm i 报错 code E404 / code E451(reason:vabjs bad guy,steal env and delete files.)
Winnie438372的博客
02-25 6305
报错信息显示（reason:vabjs bad guy,steal env and delete files）。2、查到这个依赖已经被删除了，页面为404时。里查看该包的版本是否能使用。指定latest版本下载。
在Vue3项目中使用VueCropper裁剪组件（裁剪及预览效果）
weixin_45331887的博客
12-28 1万+
Vue3封装裁剪组件
Vue-cli图片资源无法显示的原因及解决方案
Kyoku0604的博客
11-15 3386
由于Webpack在打包时，默认静态图片会被打包成base64编码格式，导致打包生成的路径与图片名（带hash值）和开发时放置的位置与名称并不一致。发生以下类似轮播图片无法显示的问题。 上图的图片路径与实际开发时的资源位置及名称都不相同。 开发时，如果静态配置页面图片位置，webpack在打包时会自动识别，并正确处理为以下网页实际路径： 但当我们使用v-if等指令，动态创建图片时，效果就不理想...
vue+图片裁剪vue-cropper以及api
浩星
12-19 4226
前言： 因为项目需要，需要实现一个上传完图片，对图片进行二次处理的需求，就使用了vue-cropper来实现这个功能，总的来说还是感觉非常不错的软件，这里分享下我的使用方法，以及vue-cropper的api（见最下） 实现效果： 实现步骤： 步骤一：项目中安装 vue-cropper npm install vue-cropper 步骤二：在main.js中注册...
vue3使用vue-cropper
最新发布
09-09
要在Vue 3中使用vue-cropper，首先你需要安装vue-cropper插件。你可以使用npm命令来安装它，具体的命令是： ``` npm install vue-cropper@next ``` 安装完成后，在你的Vue组件中引入vue-cropper的相关代码。你可以在VueCropper.ts文件中找到vue-cropper的代码，并将其引入到你的组件中。具体代码如下： ```javascript import 'vue-cropper/dist/index.css' import { VueCropper } from "vue-cropper"; export default { components: { VueCropper }, // 其他组件配置 } ``` 在你的Vue模板中，你可以使用`<vue-cropper>`标签来使用vue-cropper插件。你可以根据官方文档来配置和使用vue-cropper，实现图片裁剪的功能。 需要注意的是，为了正确地使用vue-cropper插件，你还需要在项目中引入所需的样式文件。通过引入`vue-cropper/dist/index.css`，你可以确保插件的样式能够正确地加载和应用到你的组件中。 综上所述，这是在Vue 3中使用vue-cropper的基本步骤。你可以根据你的具体需求和项目配置来进一步使用和定制vue-cropper插件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值