我唯一知道的就是自己无知。——苏格拉底最有学问和最有见识的人总是很谨慎的——卢梭
我们昨天接入了wangEditor富文本编辑器
今天我们试着将阿里云OSS集成进wangEditor
首先我们先使用vue在页面渲染结束后调用初始化wangEditor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OSS上传Demo</title> <link href="/css/elementUI.css" rel="stylesheet"> <script src="/js/jquery-3.5.1.min.js"></script> <script src="/js/vue.min.js"></script> <script src="/js/elementUI.js"></script> <script src="/js/singleUpload.js"></script> <script src="/js/wangEditor.min.js"></script> </head> <body> <div class="myApp" id="myapp"> <div> <single-upload ref="singleUpload" v-model="imageUrl"></single-upload> 文件url：{{imageUrl}} </div> <div> <div id="myEditor"></div> <el-button @click="showHtml" type="primary">预览</el-button> <div v-html="editorHtml"></div> </div> </div> <script> new Vue({ el: '#myapp', data: { imageUrl: '', editor: null, editorHtml: '' }, created() { this.$nextTick(() => { // 注意这玩意只能在页面加载完毕后调，如果在vue的created直接调用，会导致上方工具栏失效！！！ // 这是vue写法 this.initWangEditor() }) }, methods: { initWangEditor() { let E = window.wangEditor; this.editor = new E("#myEditor"); this.editor.config.customUploadImg = wangEditorCustomUploadImg this.editor.config.zIndex = 1 this.editor.create() }, showHtml() { this.editorHtml = this.editor.txt.html() } } }) </script> </body> </html>
注意下面有一句
this.editor.config.customUploadImg = wangEditorCustomUploadImg
这里指向的方法，我们在singleUpload.js中定义了
function policy() { return new Promise((resolve, reject) => { $.ajax({ url: '/oss', type: 'GET', contentType: 'application/json; charset=UTF-8', success: function (res) { if (res.code == 20000) { resolve(res) } else { reject(res) } }, error: function (res) { reject(res) } }); }); } function getUUID() { //生成UUID return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16) }) } function wangEditorCustomUploadImg(resultFiles, insertImgFn) { // resultFiles 是 input 中选中的文件列表 // insertImgFn 是获取图片 url 后，插入到编辑器的方法 policy().then(response => { if (response.code != 20000) { console.error(response) return } console.log(response) let key = response.data.dir + getUUID() + "_${filename}"; let url = response.data.host + "/" + key.replace("${filename}", resultFiles[0].name) let formData = new FormData(); formData.append('key', key); //存储在oss的文件路径 formData.append('ossaccessKeyId', response.data.accessid); //accessKeyId formData.append('policy', response.data.policy); //policy formData.append('signature', response.data.signature); //签名 formData.append("dir", response.data.dir); formData.append("host", response.data.host); formData.append("file", resultFiles[0]); console.log(url) $.ajax({ url: response.data.host, type: 'POST', contentType: false, processData: false, data: formData, success: function (res) { // 上传图片，返回结果，将图片插入到编辑器中 insertImgFn(url) }, error: function (res) { console.error(res) } }) }).catch(err => { console.error(err) }); } Vue.component('singleUpload', { props: ['value'], template: ' <div class="single-upload">' + ' <el-upload' + ' :before-upload="beforeUpload"' + ' :data="dataObj"' + ' :file-list="fileList"' + ' :multiple="false"' + ' :on-preview="handlePreview"' + ' :on-remove="handleRemove"' + ' :on-success="handleUploadSuccess"' + ' :show-file-list="showFileList"' + ' :action="dataObj.host"' + ' list-type="text"' + ' style="display: flex;"' + ' >' + ' <el-button size="small" type="primary">点击上传</el-button>' + ' </el-upload>' + ' <el-dialog :modal="false" :visible.sync="dialogVisible">' + ' <img width="100%;" v-if="isImg(fileList[0].url)" :src="fileList[0].url" alt="图片找不到了..."/>' + ' <video width="900px" controls autoplay muted v-if="isVideo(fileList[0].url)" :src="fileList[0].url" alt="视频找不到了..."/>' + ' </el-dialog>' + ' </div>', data() { return { dataObj: { policy: "", signature: "", key: "", ossaccessKeyId: "", dir: "", host: "" // callback:'', }, dialogVisible: false }; }, computed: { imageUrl() { return this.value; }, imageName() { if (this.value != null && this.value !== "") { return this.value.substr(this.value.lastIndexOf("/") + 1); } else { return null; } }, fileList() { return [ { name: this.imageName, url: this.imageUrl } ]; }, showFileList: { get: function () { return ( this.value !== null && this.value !== "" && this.value !== undefined ); }, set: function (newValue) { } } }, methods: { isVideo() { let fileType = this.getFileType() return ~['.mp4', '.avi'].indexOf(fileType) }, isImg() { let fileType = this.getFileType() return ~['.png', '.jpg', '.jpeg', '.gif'].indexOf(fileType) }, getFileType() { let fileType = this.value.substring(this.value.lastIndexOf('.')) return fileType }, getUUID() { //生成UUID return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16) }) }, emitInput(val) { this.$emit("input", val); }, handleRemove(file, fileList) { this.emitInput(""); }, handlePreview(file) { this.dialogVisible = true; }, beforeUpload(file) { let _self = this; return new Promise((resolve, reject) => { policy() .then(response => { console.log(response) _self.dataObj.policy = response.data.policy; _self.dataObj.signature = response.data.signature; _self.dataObj.ossaccessKeyId = response.data.accessid; _self.dataObj.key = response.data.dir + this.getUUID() + "_${filename}"; _self.dataObj.dir = response.data.dir; _self.dataObj.host = response.data.host; resolve(true); }) .catch(err => { reject(false); }); }); }, handleUploadSuccess(res, file) { console.log("上传成功..."); this.showFileList = true; this.fileList.pop(); this.fileList.push({ name: file.name, url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}", file.name) }); this.emitInput(this.fileList[0].url); console.log(this.fileList[0]); } } })
然后即可实现功能，我们测试一下
项目源码：
