跳转到内容

如何上传图像转换为nuxt.js

由云状团队编译

SVG世界最受欢迎矢量图像格式设计师、开发师和内容创建者使用超轻可缩也可以编辑为代码,允许定制提高SEO设计无障碍性

sVG从零开始创建可能比较复杂,但在此教程中,你将学习从任何图像生成sVG图像和代码

执行云情向量化效果创建SVG图像并使用NuxtAPI上传、获取并转换SVG图像编码

代码交换箱和GitHubRe

View全模教程开码箱:

源码上也可用GitHub.

预设条件

要理解此教程中的概念,你应该有以下内容:

搭建Nuxt.js项目

先打开它starter模板URL浏览器生成Github重写基于 starter模板

来,你设置nuxt-imgtosvg-demo名回购

计算机上打开终端窗口并浏览首选文件夹,然后克隆新创建并命令如下:

        git克隆<your-github-repo>代码语言htmlXML高山市xml)

成功克隆到您的个人电脑后,浏览文件夹并安装依存线程:

igtosvg-de

或使用微信:

dnuxt-imgtosvg-demonpm安装

成功安装依赖关系后, 打开首选代码编辑器中的项目并运行终端下方代码启动开发服务器

yerndev

或使用微信:

m运行dev

命令将服务项目并加热重载局部host3:浏览器视图

搭建云形

获取云名

新建浏览器标签打开云化仪表板并拷贝您的Cloud名 :

根目录项目创建.env文件并更新代码如下:

CLOUDINARY_CLOUDNAME=your-cloudinary-cloud-name

启动客户端上传

启动客户端上传云端需要非签名上传预置浏览器中浏览云端设置并点击上传标签并滚动到上传预设

点击添加上传预设,指定新预设名称,并修改签名模式为“无签名”,并保存预设

记下上传预设名

云化包安装Nuxt.js

运行下文代码安装Nuxt.js云式包

线程加法@nuxtjs/古典代码语言CSS系统高山市sss)

或使用微信:

微信安装@nuxtjs/古典代码语言CSS系统高山市sss)

配置云化Nuxt.js

成功安装后 打开unxt.config.js文件并更新代码如下:

导出默认{{//不删除原存代码模块化:[s/axios,'@nuxtjs/cloudinary'万事通云化:{云化Name进程.env.cloudi//不删除原存代码};代码语言JavaScript高山市javascript)

上方代码中你做了下列工作:

  • 添加@nuxtjs/cloudinaryuxt.js模块数组
  • 指定云云化Name云形对象

从设备中选择图像

代码编辑器打开页/index.vue并观察代码线16至26

<输入类型=文件类接受=图像/*名称=文件输入类=隐蔽性@变换=handle更改参考文献=文件输入/>
           <按钮时钟点击=handleRef紫色=真实性>选择图像
           按钮>代码语言htmlXML高山市xml)

上方代码

  • 上头接受图像文件并触发曲柄变换方法论
  • 上头类表示隐藏隐藏取自查看器f=file输入允许另一个元素引用
  • 上头

更新句柄Ref方法滚动到您的

Baidu
map