uni-app 实现提供意见反馈功能 包括输入框和多张图片上传

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app 实现提供意见反馈功能 包括输入框和多张图片上传

由于提供的HTML内容中并没有包含除基本信息标题之外的其他文本内容和图片,也没有提供开发环境、版本号或项目创建方式等信息,因此转换后的Markdown文档仅保留了HTML结构中的空文章区域。


3 回复

试试这个?


谢谢大佬 我看看

uni-app 中实现一个包含输入框和多张图片上传的意见反馈功能,可以利用 uni-ui 组件库中的相关组件,结合 uni.chooseImage API 来实现图片上传,并利用表单提交功能将用户意见和图片数据发送到服务器。以下是一个简单的实现示例:

1. 页面布局(pages/feedback/feedback.vue

<template>
  <view class="container">
    <view class="input-area">
      <input type="text" v-model="feedbackContent" placeholder="请输入您的意见或建议" />
    </view>
    <view class="upload-area">
      <button type="primary" @click="chooseImages">上传图片</button>
      <view v-for="(image, index) in images" :key="index" class="image-item">
        <image :src="image" mode="widthFix"></image>
        <button type="warn" @click="removeImage(index)">删除</button>
      </view>
    </view>
    <button type="primary" @click="submitFeedback">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackContent: '',
      images: []
    };
  },
  methods: {
    chooseImages() {
      uni.chooseImage({
        count: 9, // 最多可以选择的图片张数
        success: (res) => {
          this.images = [...this.images, ...res.tempFilePaths];
        }
      });
    },
    removeImage(index) {
      this.images.splice(index, 1);
    },
    submitFeedback() {
      if (!this.feedbackContent && this.images.length === 0) {
        uni.showToast({ title: '请填写意见或上传图片', icon: 'none' });
        return;
      }
      // 假设服务器接口为 /api/feedback
      uni.uploadFile({
        url: '/api/feedback',
        filePath: this.images,
        name: 'files',
        formData: {
          content: this.feedbackContent
        },
        success: (uploadFileRes) => {
          // 处理上传成功后的逻辑
          uni.showToast({ title: '提交成功', icon: 'success' });
        },
        fail: (err) => {
          // 处理上传失败后的逻辑
          uni.showToast({ title: '提交失败', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.input-area, .upload-area {
  margin-bottom: 20px;
}
.image-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.image-item button {
  margin-left: 10px;
}
</style>

2. 说明

  • 输入框:使用 input 组件来接收用户的文字意见。
  • 图片上传:使用 uni.chooseImage API 来选择图片,并展示在页面上,同时提供删除功能。
  • 提交功能:使用 uni.uploadFile API 将用户意见和图片上传到服务器。注意,这里假设服务器接口为 /api/feedback,实际使用时需要替换为实际的接口地址。

以上代码提供了一个基本的实现框架,你可以根据实际需求进行进一步的优化和扩展。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!