feat(反馈页面): 实现真实图片上传功能并移除返回按钮
替换模拟上传逻辑为真实API调用,使用wx.uploadFile上传图片至服务器 移除未使用的返回按钮相关代码和Left图标导入
Showing
1 changed file
with
45 additions
and
21 deletions
| ... | @@ -122,8 +122,9 @@ | ... | @@ -122,8 +122,9 @@ |
| 122 | <script setup> | 122 | <script setup> |
| 123 | import { ref, computed } from 'vue' | 123 | import { ref, computed } from 'vue' |
| 124 | import Taro from '@tarojs/taro' | 124 | import Taro from '@tarojs/taro' |
| 125 | -import { Left, Plus, Close } from '@nutui/icons-vue-taro' | 125 | +import { Plus, Close } from '@nutui/icons-vue-taro' |
| 126 | import { Toast } from '@nutui/nutui-taro' | 126 | import { Toast } from '@nutui/nutui-taro' |
| 127 | +import BASE_URL from '@/utils/config' | ||
| 127 | import './index.less' | 128 | import './index.less' |
| 128 | 129 | ||
| 129 | // 反馈分类 | 130 | // 反馈分类 |
| ... | @@ -154,13 +155,6 @@ const canSubmit = computed(() => { | ... | @@ -154,13 +155,6 @@ const canSubmit = computed(() => { |
| 154 | }) | 155 | }) |
| 155 | 156 | ||
| 156 | /** | 157 | /** |
| 157 | - * 返回上一页 | ||
| 158 | - */ | ||
| 159 | -const goBack = () => { | ||
| 160 | - Taro.navigateBack() | ||
| 161 | -} | ||
| 162 | - | ||
| 163 | -/** | ||
| 164 | * 选择反馈分类 | 158 | * 选择反馈分类 |
| 165 | */ | 159 | */ |
| 166 | const selectCategory = (categoryId) => { | 160 | const selectCategory = (categoryId) => { |
| ... | @@ -192,26 +186,56 @@ const triggerUpload = () => { | ... | @@ -192,26 +186,56 @@ const triggerUpload = () => { |
| 192 | 186 | ||
| 193 | /** | 187 | /** |
| 194 | * 上传图片到服务器 | 188 | * 上传图片到服务器 |
| 189 | + * @param {String} filePath - 图片文件路径 | ||
| 195 | */ | 190 | */ |
| 196 | const uploadImage = (filePath) => { | 191 | const uploadImage = (filePath) => { |
| 197 | - Taro.showLoading({ title: '上传中', mask: true }) | 192 | + // 显示上传中提示 |
| 198 | - | 193 | + Taro.showLoading({ |
| 199 | - // 模拟上传成功(实际项目中替换为真实的上传逻辑) | 194 | + title: '上传中', |
| 200 | - setTimeout(() => { | 195 | + mask: true |
| 201 | - Taro.hideLoading() | 196 | + }) |
| 202 | - | ||
| 203 | - // 模拟服务器返回的图片URL | ||
| 204 | - const mockImageUrl = filePath // 在实际项目中,这里应该是服务器返回的URL | ||
| 205 | 197 | ||
| 198 | + // 使用wx.uploadFile进行真实上传 | ||
| 199 | + wx.uploadFile({ | ||
| 200 | + url: BASE_URL + '/admin/?m=srv&a=upload', | ||
| 201 | + filePath, | ||
| 202 | + name: 'file', | ||
| 203 | + header: { | ||
| 204 | + 'content-type': 'multipart/form-data', | ||
| 205 | + }, | ||
| 206 | + success: function (res) { | ||
| 207 | + let upload_data = JSON.parse(res.data); | ||
| 208 | + Taro.hideLoading({ | ||
| 209 | + success: () => { | ||
| 210 | + if (res.statusCode === 200) { | ||
| 206 | // 添加到已上传图片列表 | 211 | // 添加到已上传图片列表 |
| 207 | - uploadedImages.value.push(mockImageUrl) | 212 | + uploadedImages.value.push(upload_data.data.src); |
| 208 | - | ||
| 209 | Taro.showToast({ | 213 | Taro.showToast({ |
| 210 | title: '上传成功', | 214 | title: '上传成功', |
| 211 | - icon: 'success', | 215 | + icon: 'success' |
| 212 | - duration: 2000 | ||
| 213 | }) | 216 | }) |
| 214 | - }, 1500) | 217 | + } else { |
| 218 | + Taro.showToast({ | ||
| 219 | + icon: 'error', | ||
| 220 | + title: '服务器错误,稍后重试!', | ||
| 221 | + mask: true | ||
| 222 | + }) | ||
| 223 | + } | ||
| 224 | + } | ||
| 225 | + }); | ||
| 226 | + }, | ||
| 227 | + fail: function (res) { | ||
| 228 | + Taro.hideLoading({ | ||
| 229 | + success: () => { | ||
| 230 | + Taro.showToast({ | ||
| 231 | + icon: 'error', | ||
| 232 | + title: '上传失败,稍后重试!', | ||
| 233 | + mask: true | ||
| 234 | + }) | ||
| 235 | + } | ||
| 236 | + }) | ||
| 237 | + } | ||
| 238 | + }); | ||
| 215 | } | 239 | } |
| 216 | 240 | ||
| 217 | /** | 241 | /** | ... | ... |
-
Please register or login to post a comment