hookehuyr

创建活动页面上传图片功能联调

1 <!-- 1 <!--
2 * @Date: 2022-09-26 21:52:25 2 * @Date: 2022-09-26 21:52:25
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-27 09:09:44 4 + * @LastEditTime: 2022-10-17 13:40:57
5 * @FilePath: /swx/src/components/activity-editor.vue 5 * @FilePath: /swx/src/components/activity-editor.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <view class="editor-box"> 9 <view class="editor-box">
10 <view class="editor-box-header" v-if="showTabBar"> 10 <view class="editor-box-header" v-if="showTabBar">
11 - <view class="operate-box" :data-uploadImageURL="uploadImageURL" @tap="_addImage"> 11 + <view class="operate-box" @tap="_addImage">
12 <text class="iconfont icon-image"></text> 12 <text class="iconfont icon-image"></text>
13 </view> 13 </view>
14 <view class="operate-box" @tap="_addItalic"> 14 <view class="operate-box" @tap="_addItalic">
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
43 </view> 43 </view>
44 </view> 44 </view>
45 <view class="editor-box-content"> 45 <view class="editor-box-content">
46 - <editor id="editor" :name="name" :placeholder="placeholder" @ready="_onEditorReady" 46 + <editor id="editor" :name="name" :placeholder="placeholder" @ready="_onEditorReady" @input="_onInputting"
47 - @input="_onInputting" :show-img-resize="true"></editor> 47 + :show-img-resize="true"></editor>
48 </view> 48 </view>
49 </view> 49 </view>
50 </template> 50 </template>
...@@ -55,10 +55,11 @@ import { ref } from 'vue' ...@@ -55,10 +55,11 @@ import { ref } from 'vue'
55 </script> 55 </script>
56 <script> 56 <script>
57 import Taro from '@tarojs/taro' 57 import Taro from '@tarojs/taro'
58 +import BASE_URL from '@/utils/config';
58 59
59 export default { 60 export default {
60 - props: ['showTabBar', 'placeholder', 'name', 'uploadImageURL'], 61 + props: ['showTabBar', 'placeholder', 'name'],
61 - data () { 62 + data() {
62 return { 63 return {
63 64
64 } 65 }
...@@ -82,23 +83,27 @@ export default { ...@@ -82,23 +83,27 @@ export default {
82 title: '上传中', 83 title: '上传中',
83 mask: true 84 mask: true
84 }); 85 });
85 - _this._uploadImage(res.tempFilePaths[0], event.currentTarget.dataset.uploadimageurl); 86 + // _this._uploadImage(res.tempFilePaths[0], event.currentTarget.dataset.uploadimageurl);
87 + _this._uploadImage(res.tempFilePaths[0], BASE_URL + '/admin/?m=srv&a=upload');
86 } 88 }
87 }); 89 });
88 }, 90 },
89 _uploadImage: function (tempFilePath, uploadImageURL) { 91 _uploadImage: function (tempFilePath, uploadImageURL) {
90 let _this = this; 92 let _this = this;
91 wx.uploadFile({ 93 wx.uploadFile({
92 - filePath: tempFilePath,
93 - name: 'image',
94 url: uploadImageURL, 94 url: uploadImageURL,
95 + filePath: tempFilePath,
96 + name: 'file',
97 + header: {
98 + 'content-type': 'multipart/form-data',
99 + },
95 success: function (res) { 100 success: function (res) {
96 - res = JSON.parse(res.data); 101 + let upload_data = JSON.parse(res.data);
97 wx.hideLoading({ 102 wx.hideLoading({
98 success: () => { 103 success: () => {
99 - if (res.code === 200) { 104 + if (res.statusCode === 200) {
100 _this.editorCtx.insertImage({ 105 _this.editorCtx.insertImage({
101 - src: res.data 106 + src: upload_data.data.src
102 }); 107 });
103 } else { 108 } else {
104 wx.showToast({ 109 wx.showToast({
......
1 <!-- 1 <!--
2 * @Date: 2022-09-21 16:04:10 2 * @Date: 2022-09-21 16:04:10
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-10-14 17:35:45 4 + * @LastEditTime: 2022-10-17 13:56:03
5 * @FilePath: /swx/src/pages/createActivity/index.vue 5 * @FilePath: /swx/src/pages/createActivity/index.vue
6 * @Description: 创建活动页面 6 * @Description: 创建活动页面
7 --> 7 -->
...@@ -282,6 +282,7 @@ import { getCurrentPageUrl, getCurrentPageParam } from "@/utils/weapp"; ...@@ -282,6 +282,7 @@ import { getCurrentPageUrl, getCurrentPageParam } from "@/utils/weapp";
282 import request from '../../utils/request'; 282 import request from '../../utils/request';
283 import Taro from '@tarojs/taro' 283 import Taro from '@tarojs/taro'
284 import mixin from '../../utils/mixin'; 284 import mixin from '../../utils/mixin';
285 +import BASE_URL from '@/utils/config';
285 286
286 const message = ref(''); 287 const message = ref('');
287 const message1 = ref(''); 288 const message1 = ref('');
...@@ -307,9 +308,32 @@ const has_image = ref(false) ...@@ -307,9 +308,32 @@ const has_image = ref(false)
307 const uploader_image = ref('') 308 const uploader_image = ref('')
308 const afterRead = (event) => { 309 const afterRead = (event) => {
309 const { file } = event.detail; 310 const { file } = event.detail;
310 - console.warn(file); 311 + // 获取上传URL
311 - has_image.value = true; 312 + wx.uploadFile({
312 - uploader_image.value = file.url 313 + url: BASE_URL + '/admin/?m=srv&a=upload',
314 + filePath: file.url,
315 + name: 'file',
316 + header: {
317 + 'content-type': 'multipart/form-data',
318 + },
319 + success: function (res) {
320 + let upload_data = JSON.parse(res.data);
321 + wx.hideLoading({
322 + success: () => {
323 + if (res.statusCode === 200) {
324 + has_image.value = true;
325 + uploader_image.value = upload_data.data.src;
326 + } else {
327 + wx.showToast({
328 + icon: 'error',
329 + title: '服务器错误,稍后重试!',
330 + mask: true
331 + })
332 + }
333 + },
334 + });
335 + }
336 + });
313 } 337 }
314 const removeUploadImage = () => { 338 const removeUploadImage = () => {
315 has_image.value = false; 339 has_image.value = false;
......