微信小程序 uni-app piaoyi-editor 富文本上传图片失败
1、html
1 <view class="form-input"> 2 <view class="label">{{ getText('activityDetails') }}</view> 3 <view class="richtext"> 4 <piaoyiEditor :values="values" :maxlength="3000" @changes="saveContens" :readOnly="readOnly" :photoUrl="photoUrl" :api="api" :name="name"/> 5 <view class="" v-if="false"> 6 {{txt}} 7 </view> 8 </view> 9 </view>
1 data() { 2 return { 3 // 富文本 4 readOnly: false, //是否只读 5 photoUrl: getTotalUrl('https://base.xxxxxx.com:8766'), //服务器图片域名或者ip 6 api: '/api/ybpf/pc/uploadImg', //上传图片接口地址 7 txt: '', 8 name: 'file', 9 10 }; 11 }, 12 methods: { 13 // 富文本 14 saveContens(e) { 15 this.txt = e.html 16 this.form.content = e.html 17 }, 18 19 }
以上代码还是不能实现富文本上传图片成功!!!!
找到piaoyi-editor.vue组件文件,修改其内容
找到 uni.uploadFile
1 uni.uploadFile({ 2 url: this.photoUrl + this.api, 3 filePath: tempFilePaths, 4 name: this.name, 5 formData: {}, 6 //有的接口需要header 7 header: { 8 // 'Content-Type': 'multipart/form-data', // 设置内容类型 9 'Authorization': uni.getStorageSync('token') // 如果需要认证的话 10 // 可以添加其他任何你需要的头 11 }, 12 success: (uploadFileRes) => { 13 var obj = JSON.parse(uploadFileRes.data) 14 console.log('22222222222222222222',obj)
//修改后端返回的内容后图片就可以正常显示了 15 if (obj.status == 200) { 16 console.log("图片上传:",obj); 17 // this.img = this.photoUrl + '/' + obj.data 18 this.img = obj.data[0].url//图片回显地址 19 wx.showToast({ 20 title: obj.msg, 21 icon: 'none' 22 }) 23 this.editorCtx.insertImage({ 24 src: this.img, 25 alt: '图像', 26 success: function() {} 27 }) 28 } else { 29 wx.showToast({ 30 title: obj.msg, 31 icon: 'none' 32 }) 33 } 34 }, 35 fail(err) { 36 console.log(err) 37 uni.showToast({ 38 title: err.errMsg, 39 icon: 'none' 40 }) 41 } 42 });