温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue怎么将图片上传到服务器

发布时间:2022-01-27 09:38:40 阅读:327 作者:iii 栏目:开发技术
亿速云爆款云服务器,独享5M带宽,BGP线路,安全稳定,0.96元/天! 查看详情>>

这篇文章主要介绍“vue怎么将图片上传到服务器”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么将图片上传到服务器”文章能帮助大家解决问题。

一、准备工作

下载 vue-quill-editor

npm install vue-quill-editor --save  或者 yarn add vue-quill-editor

二、定义全局组件quill-editor

下载好 vue-quill-editor 后,我们需要定义一个全局组件,把这个组件名字命名为 quill-editor

1、定义template模板

<div>    <quill-editor        v-model="value"        ref="myQuillEditor"        :options="editorOption"        @change="onEditorChange"        >    </quill-editor>    <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleChange" /></div>

2、定义富文本选项配置

editorOption: {    toolbar: [        ['bold', 'italic', 'underline'],   //加粗、斜体、下划线、删除线, 'strike'        ['blockquote', 'code-block'],   //引用、代码块        [{ 'header': 1 }, { 'header': 2 }],  //H1  H2        [{ 'list': 'ordered' }, { 'list': 'bullet' }],  //列表        [{ 'script': 'sub' }, { 'script': 'super' }],   //上标、下标        [{ 'indent': '-1' }, { 'indent': '+1' }],   //缩进        [{ 'direction': 'rtl' }],    //文字编辑方向,从左到右还是从右到左        [{ 'size': ['small', false, 'large', 'huge'] }],  //文字大小        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  //选中的文字容器高度        [{ 'font': [] }],   //字体样式        [{ 'color': [] }, { 'background': [] }],   //颜色、背景颜色        [{ 'align': [] }],   //对齐方式        ['clean'],   //清除选中文字的所有样式        ['link', 'image', 'video']   //超链接、图片、视频链接    ],}

三、相关方法

1、改变原有富文本编辑器上传图片绑定方法

mounted() {    if (this.$refs.myQuillEditor) {        //myQuillEditor改成自己的        this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", this.imgHandler);    }},methods:{   imgHandler(state) {       if (state) {            //触发input的单击 ,fileBtn换成自己的           this.$refs.fileBtn.click()       }   }}

2、上传事件

handleChange(e) {    const files = Array.prototype.slice.call(e.target.files);    if (!files) {        return;    }    let formdata = new FormData();    formdata.append("file_name", files[0].name);    formdata.append("imgs", files[0]);    //使用了axios请求    this.axios({        url: this.$store.state.baseUrl + 'upload/ueditorFile',        method: 'post',        data: formdata,        headers: {'client-identity': localStorage.getItem('session_id')}    }).then((res) => {        //这里设置为空是为了联系上传同张图可以触发change事件        this.$refs.fileBtn.value = "";        if (res.data.code == 200) {            let selection = this.$refs.myQuillEditor.quill.getSelection();            //这里就是返回的图片地址,如果接口返回的不是可以访问的地址,要自己拼接            let imgUrl = this.$store.state.baseUrl + res.data.data;             imgUrl = imgUrl.replace(/\\/g,"/")               //获取quill的光标,插入图片             this.$refs.myQuillEditor.quill.insertEmbed(selection != null ? selection.index : 0, 'image', imgUrl)                             //插入完成后,光标往后移动一位             this.$refs.myQuillEditor.quill.setSelection(selection.index + 1);        }     })}

最后在父组件使用这个全局 quill 组件,并传递自己需要的相关参数

关于“vue怎么将图片上传到服务器”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×