Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍"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模板

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怎么将图片上传到服务器"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.