mp:实现 wx-editor 图片的上传

This commit is contained in:
YunaiV
2023-01-14 01:32:53 +08:00
parent f48276d2bc
commit 73fac5235f
6 changed files with 73 additions and 7 deletions

View File

@ -6,7 +6,7 @@
<div id="wxEditor">
<div v-loading="quillUpdateImg" element-loading-text="请稍等,图片上传中">
<!-- 图片上传组件辅助-->
<el-upload class="avatar-uploader" name="file" :action="serverUrl" :headers="header"
<el-upload class="avatar-uploader" name="file" :action="actionUrl" :headers="headers"
:show-file-list="false" :data="uploadData"
:on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload">
</el-upload>
@ -95,7 +95,7 @@ export default {
}
}
},
serverUrl: process.env.VUE_APP_BASE_API +'/wxmaterial/newsImgUpload', // 这里写你要上传的图片服务器地址
actionUrl: process.env.VUE_APP_BASE_API +'/admin-api/mp/material/upload-news-image', // 这里写你要上传的图片服务器地址
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
}
},
@ -107,31 +107,34 @@ export default {
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
// 显示 loading 动画
this.quillUpdateImg = true
},
// 图片上传成功
// 注意!由于微信公众号的图片有访问限制,所以会显示“此图片来自微信公众号,未经允许不可引用”
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill
// 如果上传成功
if(res.link){
const link = res.data
if (link){
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.link)
quill.insertEmbed(length, 'image', link)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$message.error('图片插入失败')
}
// loading动画消失
// loading 动画消失
this.quillUpdateImg = false;
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
// loading 动画消失
this.quillUpdateImg = false;
this.$message.error("图片插入失败");
}