uni-app 图片上传 删除 功能

当然，以下是一个使用uni-app实现图片上传和删除功能的示例代码。我们将使用uni-app的<image>组件来显示图片，并通过<button>组件触发上传和删除操作。

首先，确保你已经在pages.json中配置好页面路径。

页面模板 (template)

<template>
  <view class="container">
    <view class="image-list">
      <block v-for="(image, index) in images" :key="index">
        <image :src="image" class="image-item" mode="widthFix"></image>
        <button @click="deleteImage(index)" class="delete-button">删除</button>
      </block>
    </view>
    <button @click="chooseImage" class="upload-button">上传图片</button>
  </view>
</template>

样式 (style)

<style scoped>
.container {
  padding: 20px;
}
.image-list {
  display: flex;
  flex-wrap: wrap;
}
.image-item {
  width: 100px;
  margin: 10px;
}
.delete-button {
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}
.upload-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

脚本 (script)

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9, // 限制选择图片的数量
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.images = [...this.images, ...tempFilePaths];
        }
      });
    },
    deleteImage(index) {
      this.images.splice(index, 1);
    }
  }
};
</script>

说明

1. 模板部分：

   • 使用<view>和<block>布局图片列表和上传按钮。
   • 使用<image>组件显示图片，并使用<button>组件提供删除按钮。

2. 样式部分：

   • 简单的CSS样式用于布局和美化界面。

3. 脚本部分：

   • chooseImage方法调用uni.chooseImage接口选择图片，并将选择的图片路径添加到images数组中。
   • deleteImage方法根据索引删除指定图片。

这个示例提供了一个基本的图片上传和删除功能，你可以根据需要进行扩展和美化。