微信小程序 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 });

 

posted on 2024-12-16 08:45  奔驰的码儿  阅读(6)  评论(0编辑  收藏  举报

导航