uni-app 图片+textarea拖拽排序点击提交输出图片地址和textarea内容数组

在处理 uni-app 中图片和 textarea 的拖拽排序功能并提交输出图片地址和 textarea 内容数组的需求时，我们可以利用 Vue.js 的相关插件来实现拖拽排序功能，并通过绑定数据和事件处理来实现提交功能。下面是一个简化的代码示例：

1. 安装依赖

首先，确保你的项目中安装了 vuedraggable 插件，用于实现拖拽排序功能。

npm install vuedraggable --save

2. 页面代码（pages/index/index.vue）

<template>
  <view>
    <draggable v-model="items" @end="onEnd">
      <view v-for="(item, index) in items" :key="index" class="item">
        <image :src="item.image" class="image" />
        <textarea v-model="item.content" class="textarea"></textarea>
      </view>
    </draggable>
    <button @click="submit">提交</button>
  </view>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { image: 'path/to/image1.jpg', content: '' },
        { image: 'path/to/image2.jpg', content: '' },
        // 更多项...
      ]
    };
  },
  methods: {
    onEnd(event) {
      // 可以在这里处理拖拽结束后的逻辑
      console.log('拖拽结束后的新顺序:', this.items);
    },
    submit() {
      // 提交数据，例如通过uni.request发送到服务器
      const imageAddresses = this.items.map(item => item.image);
      const contents = this.items.map(item => item.content);
      console.log('图片地址:', imageAddresses);
      console.log('textarea内容:', contents);
      
      // 示例：发送到服务器
      // uni.request({
      //   url: 'your-server-url',
      //   method: 'POST',
      //   data: {
      //     images: imageAddresses,
      //     contents: contents
      //   },
      //   success: (res) => {
      //     console.log('提交成功:', res);
      //   }
      // });
    }
  }
};
</script>

<style>
.item {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.image {
  width: 100px;
  height: 100px;
}
.textarea {
  width: 100%;
  height: 50px;
}
</style>

3. 解释

• 使用 vuedraggable 组件来实现拖拽排序功能。
• v-model 绑定 items 数组，其中每个元素包含 image 和 content 属性。
• 在 onEnd 方法中处理拖拽结束后的逻辑（如日志输出）。
• 在 submit 方法中，将图片地址和 textarea 内容分别提取为数组，并打印到控制台（或发送到服务器）。

这个示例展示了如何在 uni-app 中实现图片和 textarea 的拖拽排序功能，并在点击提交按钮后输出相关的数据。你可以根据实际需求进一步扩展和修改这个示例。