uni-app + uView 的完美搭档：相册/拍照无缝上传图片

2023-12-09 10:39:55

大家好，我是 [你的名字]，欢迎来到我的技术博客。今天，我将向你们展示如何使用 uni-app 和 uView 的强大功能，轻松实现一个类似朋友圈的选择图片并实时预览和删除的场景。

需求背景

在当今的社交媒体时代，图片已经成为一种不可或缺的表达方式。在朋友圈中，用户希望能够轻松地从相册中选择图片或拍照，并实时预览和删除这些图片。为了满足这一需求，我们将使用 uni-app 的原生 uni.chooseImage API 和 uView 的 u-upload 组件。

技术架构

uni-app + uView 的组合提供了以下优势：

跨平台开发： uni-app 是一款跨平台框架，允许你使用一套代码同时开发 iOS 和 Android 应用程序。
强大组件： uView 提供了一系列功能强大的组件，包括 u-upload，可简化图片上传任务。
无缝整合： uni-app 和 uView 无缝集成，使开发过程更加高效。

实现步骤

1. 安装依赖

首先，我们需要安装 uView 依赖：

npm install uview-ui --save

2. 配置 uni.chooseImage API

接下来，我们在 App.vue 文件中配置 uni.chooseImage API：

import { uni } from '@dcloudio/uni-ui'
export default {
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9,
        success: (res) => {
          this.fileList = res.tempFilePaths
        },
      })
    },
  },
}

3. 使用 u-upload 组件

在页面中，我们使用 u-upload 组件来上传图片：

<template>
  <div>
    <u-upload v-model="fileList" :max-count="9" @change="upload">
      <template #default>
        <div class="upload-btn">
          <i class="iconfont icon-upload"></i>
          <span>选择图片</span>
        </div>
      </template>
    </u-upload>
    <ul class="image-list">
      <li v-for="item in fileList" :key="item">
        <img :src="item" alt="" />
        <i class="iconfont icon-close" @click="remove(item)"></i>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const fileList = ref([])
    const upload = (file) => {
      // 上传图片到服务器
    }
    const remove = (item) => {
      fileList.value = fileList.value.filter((i) => i !== item)
    }
    return { fileList, upload, remove }
  },
}
</script>

<style>
.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border: 1px dashed #ccc;
  border-radius: 10px;
  cursor: pointer;
}

.upload-btn .iconfont {
  font-size: 30px;
  margin-right: 10px;
}

.image-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
}

.image-list li {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.image-list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-list li .iconfont {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  color: #fff;
  background: #000;
  opacity: 0.5;
  cursor: pointer;
}
</style>