vue上传图片文件到服务器,10秒带你实现图片上传到服务器

╰+攻爆jí腚メ 2022-09-02 14:50 480阅读 0赞

原生上传图片到服务器

上次给大家分享过下面的文章

结合element-ui上传图片到服务器

基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件即可。无需引入

element-ui，并且增加了部分功能：

可限制图片上传的格式

可限制图片的大小

可重写图片上传成功失败触发的事件

具体使用如下

新建一个文件名为 vue-quill-editor-config.js(文件名可自定义)，点击上面的链接复制代码到本文件

绑定配置

引入配置参数

import \{editorOptions\} from '@/config/vue-quill.editor-config'

// '@/config/vue-quill.editor-config' 为你存放自定义配置的文件路径

在vue组件中绑定配置

ref="myQuillEditor"

:options="editorOptions"

@change="onEditorChange($event)"

@ready="onEditorReady($event)"

>

import \{quillEditor\} from 'vue-quill-editor' // 调用编辑器

import \{editorOptions\} from '@/config/vue-quill.editor-config'

export default \{

components: \{quillEditor\},

data() \{

return \{

// 富文本框参数设置， 这里也是必须绑定的，因为参数绑定是绑定组件里面的数据，

// 而不是直接绑定引入的editorOptionss

editorOptions: editorOptionss

\}

\}

\}

预留的事件接口

在配置文件中大家可根据自己的需求自行定义上传图片的各个阶段的事件

![e4bfd2c5a5014e09b53ee11f35a11e70.png][]

注意绑定好你的图片参数

如下图所示，res.info为上传图片成功后返回的图片地址，如果不确认返回的数据格式，可以使用console.log() 进行查看

![369cfc05639ca28d1c52afa352efe44c.png][]

附加内容

如何在配置文件中获取Vue实例

由于在handler中，this是指向编辑器，因此无法直接用this去获取Vue实例，

如果想获取，需要进行如下操作

暴露实例

![84485a48576ab52cb717984536e49da9.png][]

引入实例

在vue-quill-editor-config.js配置中引入

![2968b99a5494f3ed3f68bcb4fb47d852.png][]

在vue-quill-editor-config.js配置文件中使用

![ba011ec52daad988aeb7bedd6b941c6b.png][]

结束！

简不简单？

感觉有用的朋友请点个赞

[e4bfd2c5a5014e09b53ee11f35a11e70.png]: /images/20220829/9e34fdd2f15f49738515f3f0b366887d.png
[369cfc05639ca28d1c52afa352efe44c.png]: /images/20220829/a93aa5a6a1be441eb50d358291f7165a.png
[84485a48576ab52cb717984536e49da9.png]: /images/20220829/9effa1359cec4c8e98123cc7212bbe65.png
[2968b99a5494f3ed3f68bcb4fb47d852.png]: /images/20220829/5838d284a74545f9b0240ce7809d0ce6.png
[ba011ec52daad988aeb7bedd6b941c6b.png]: /images/20220829/e6deebaf205546b48b806a9fb5f45f83.png

发表评论取消回复

表情：

评论列表（有 0 条评论，480人围观）

还没有评论，来说两句吧...

相关阅读

相关前端上传图片文件到服务器 COS

平时前端上传图片都会要后端中转一下发送给资源服务器再返回路径给前端，这样势必影响效率。在开发中前端是可以直接上传资源文件到服务器上的，只不过服务器密钥（下文中Secre

柔情只为你懂/ 2023年01月15日 11:26/ 0 赞/ 209 阅读

相关 windows10上传文件到服务器

右键开始菜单，选择 windows Powershell(管理员) 一、使用SSH连接Linux服务器： ssh username@Linuxaddress 输入密码

深藏阁楼爱情的钟/ 2022年11月10日 14:18/ 0 赞/ 317 阅读

相关 android 图片上传到服务器上,Android以最有效的方式将图片上传到服务器

我需要将图像与其他数据(非常类似于带有附件的电子邮件)一起提供给服务器。我还需要以可靠的方式做到这一点，所以我可以在失败时重试等。服务器是WCF REST服务器，我用它做

叁歲伎倆/ 2022年10月16日 03:59/ 0 赞/ 237 阅读

相关 c语言上传图片至服务器,JSP+Servlet实现文件上传到服务器功能

本文实例为大家分享了JSP+Servlet实现文件上传到服务器功能的具体代码，供大家参考，具体内容如下项目目录结构大致如下： ![b267ad63b8ce3414dda6

朴灿烈づ我的快乐病毒、/ 2022年10月15日 15:57/ 0 赞/ 221 阅读

相关上传图片文件到服务器上,Java如何实现上传文件图片到服务器

Java如何实现上传文件图片到服务器发布时间：2021-07-24 11:02:12 来源：亿速云阅读：58 作者：小新这篇文章主要介绍Java如何实现上传文件

深碍√TFBOYSˉ_/ 2022年09月04日 06:54/ 0 赞/ 304 阅读

相关 vue上传图片文件到服务器,10秒带你实现图片上传到服务器

原生上传图片到服务器上次给大家分享过下面的文章结合element-ui上传图片到服务器基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件

╰+攻爆jí腚メ/ 2022年09月02日 14:50/ 0 赞/ 481 阅读

相关使用Jersey + SpringMVC 上传图片到图片服务器

> 实际项目中可能要用到单独的文件服务器，这时候可以使用jersey上传文件的方法达到分离文件服务器和主服务器。于是通过查询资料以及不断尝试，终于走出了这个图片上传一直报错的

心已赠人/ 2022年06月18日 05:29/ 0 赞/ 286 阅读

相关 URL图片上传到OSS服务器

方案先缓存到本地，再放到服务器 package com.duodian.youhui.admin.utils; import com.duo

墨蓝/ 2022年03月26日 14:08/ 0 赞/ 342 阅读

相关上传图片方法到免费服务器

1. 使用的小白接口:App.CDN.UploadImg 链接：[http://api.okayapi.com/?s=App.CDN.UploadImg][http_ap

一时失言乱红尘/ 2022年02月04日 07:47/ 0 赞/ 435 阅读

相关 java 代码jodd 上传图片到文件服务器

今天项目需要上传图片到文件服务器，使用的是jodd,特做记录 1.导入依赖 <dependency> <groupId>org.jodd</group

迈不过友情╰/ 2022年01月27日 05:11/ 0 赞/ 344 阅读