html5七牛图片上传js,vue-html5-editor富文本图片上传到七牛的url怎么配？

最新推荐文章于 2023-04-12 09:38:23 发布

weixin_39641697

最新推荐文章于 2023-04-12 09:38:23 发布

阅读量135

点赞数

文章标签： html5七牛图片上传js

这篇博客详细介绍了如何配置Vue Html5 Editor，包括设置全局组件名称、是否显示模块名称、自定义图标类，特别是针对图片模块进行了深入配置。博主展示了如何设置图片的最大体积、上传参数、压缩选项以及如何处理上传后的响应数据，提供了完整的示例代码，对于想要自定义编辑器上传功能的开发者具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 全局组件名称，使用new VueHtml5Editor(options)时该选项无效

// global component name

name: 'vue-html5-editor', // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称 // if set true,will append module name to toolbar after icon

showModuleName: false, // 自定义各个图标的class，默认使用的是font-awesome提供的图标 // custom icon class of built-in modules,default using font-awesome // 配置图片模块 // config image module

image: {

// 文件最大体积，单位字节 max file size

sizeLimit: 1024 * 1024, // 上传参数,默认把图片转为base64而不上传 // upload config,default null and convert image to base64

upload: {

url: "https://upload-z2.qiniup.com/",

headers: { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()},

params: {},

fieldName: {}

}, // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩 // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG) // set null to disable compression

compress: {

width: 1600,

height: 1600,

quality: 80

}, // 响应数据处理,最终返回图片链接 // handle response data，return image url

uploadHandler(responseText) {

//default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}

var json = JSON.parse(responseText);

if (!json.ok) {

alert(json.msg);

} else {

return json.data;