nuxt vue-image-crop-upload头像上传

换头像是一个经常容易遇到的问题，饿了么ui给的例子也不是那么好看，自己写一个又感觉太难（作为菜鸡一枚），在网上找了一会。
发现vue-image-crop-upload这个vue的组件不错，而且github上的星星也蛮多，就打算用这个了。
前段时间试过一次，然而nuxt貌似不给面子，按照github上的方法引用vue-image-crop-upload组件，报错。Nuxt: Unexpected token <
看着网上各种博客都貌似正常使用，我十分疑惑，然后换了一个框架，vue-admin-element发现正常使用，因此我觉得是nuxt框架的问题导致按照使用错误。

vue-image-crop-upload的github地址教程使用的都是

这种直接import的方式，而nuxt官网有介绍到，如果要引入第三方库
有以下方法

我这边先使用的是截图中的第一种，添加一个
vue-image-crop-upload.js

import Vue from 'vue'
import avatarUpload from 'vue-image-crop-upload/upload-2.vue';Vue.component('avatar-upload',avatarUpload)

然后在nuxt的配置文件中nuxt.config.js注册

还有一些其他的我需要用到的组件。
最后按照官方文档教程的使用就能正常使用vue-image-crop-upload这个组件了。

在此我要特别提一点：

import Vue from 'vue'
import avatarUpload from 'vue-image-crop-upload/upload-2.vue';Vue.component('avatar-upload',avatarUpload)

这里是Vue.component('avatar-upload',avatarUpload)注册组件,而不是Vue.use('avatar-upload',avatarUpload),我试过，使用Vue.use()这样注册时还是会报错，说是没有正确注册这个组件。

nuxt vue-image-crop-upload头像上传相关推荐

vue项目中实现头像上传的功能型组件
@vue项目中实现头像上传的功能型组件功能需求实现个人中心的头像上传功能: 1.用户未上传过头像,展示设定好的默认头像(区分男女) 2.支持格式png.jpg.jpeg 3.图片大小:小于等于2M ...
vue前端完成头像上传
vue前端代码实现头像上传 1.创建项目,使用vue-admin-template框架使用vue命令在终端(开发工具VScode)输入npm install,即可按package.json文件下载 ...
上传头像 java_Java头像上传方法
import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest ...
基于 springboot + vue 的 element-ui 的 upload 组件头像上传功能
基于 springboot + vue 的 element-ui 的 upload 组件头像上传为了方便我们自己本地测试使用,我们将文件上传至自己电脑的磁盘中,由于项目是前后端分离的,所以我们会直接 ...
vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件，用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
vue中使用axios post上传头像/图片并实时显示到页面
前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: <div id="myPhoto&qu ...
SpringBoot + Vue 前后端分离（用户信息更新头像上传Markdown图片上传）
文章目录前言用户信息更新前端发送后端接口修改用户头像前端前端图片显示图片上传完整代码后端代码图片存储图片上传工具类图片工具类的配置工具类实现效果 Markdown 图片 ...
微服务电商实战(十一)搭建vue项目对接注册登陆接口，解决跨域问题，使用七牛云实现头像上传
一.简介 node.js版本:v12.16.3 node.js下载 vue官网教程 iview介绍上传头像接口,图片存储在七牛云中,注册并实名认证之后可以免费使用以下会描述使用vue搭建项目框架的 ...
SpringBoot + Vue 头像上传案例
头像上传前言后台系统一般会有用户个人信息的模块,为了增强用户的体验度,系统会开放自定义头像的功能,让用户可以上传自定义图片替代默认的系统头像.本文将通过SpringBoot+Vue来具体实现. 前 ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...

nuxt vue-image-crop-upload头像上传

nuxt vue-image-crop-upload头像上传相关推荐

最新文章

热门文章