完美掌握vue/uniapp图片上传

2024-01-31 09:53:03

在移动应用中使用 UniApp 实现图片上传

在移动互联网时代，图片上传是移动应用不可或缺的功能。对于 UniApp 开发者来说，图片上传却常常遇到各种问题，例如无法上传、上传失败等。本文将深入探讨如何使用 UniApp 的 uni.chooseImage 和 uni.uploadFile API 实现图片上传，并提供完整的代码示例，帮助开发者轻松解决手机图片上传难题。

准备工作

开始之前，你需要确保已经安装了 UniApp 开发工具，这是 UniApp 官方提供的开发环境，可帮助你快速构建 UniApp 应用。前往 UniApp 官网下载安装即可。

实现图片上传

1. 引入相关模块

首先，在你的 UniApp 项目中引入相关模块：

import { uni } from '@dcloudio/uni-mp-weixin';

2. 定义数据

接下来，定义数据：

data() {
  return {
    imageList: [],
    uploadUrl: 'http://your-domain.com/upload',
  }
},

3. 选择图片

使用 uni.chooseImage API 选择图片：

methods: {
  chooseImage() {
    uni.chooseImage({
      count: 9, // 最多可以选择 9 张图片
      sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
      sourceType: ['album', 'camera'], // 可以从相册或相机选择
      success: (res) => {
        this.imageList = res.tempFilePaths
      },
    })
  },
},

4. 上传图片

图片选择完成后，使用 uni.uploadFile API 上传图片：

uploadFile() {
  for (let i = 0; i < this.imageList.length; i++) {
    uni.uploadFile({
      url: this.uploadUrl,
      filePath: this.imageList[i],
      name: 'file',
      success: (res) => {
        console.log(res)
      },
    })
  }
},

5. 显示上传进度

可以使用 uni.uploadFile 的 progress 属性显示上传进度：

uploadFileWithProgress() {
  for (let i = 0; i < this.imageList.length; i++) {
    uni.uploadFile({
      url: this.uploadUrl,
      filePath: this.imageList[i],
      name: 'file',
      progress: (res) => {
        console.log(res.progress)
      },
      success: (res) => {
        console.log(res)
      },
    })
  }
},

样式代码

为了美化上传界面，添加以下样式代码：

/* 选择图片样式 */
.choose-image-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  border: 1px dashed #ccc;
  cursor: pointer;
}

/* 上传图片按钮样式 */
.upload-image-button {
  margin-left: 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/* 上传进度条样式 */
.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ccc;
}

/* 上传进度条已完成部分样式 */
.progress-bar-completed {
  width: 0%;
  height: 10px;
  background-color: #000;
}