uniapp 图片上传功能如何实现

在uniapp中实现图片上传功能时，应该使用哪个API或组件？是否需要配置特定的服务器地址？上传过程中如何获取图片的本地路径和上传进度？能否提供完整的代码示例，包括前端选择图片和后端接收处理的部分？

2 回复

在uniapp中，使用uni.chooseImage选择图片，再用uni.uploadFile上传到服务器。记得处理上传进度和结果回调，并注意图片压缩和格式限制。


在 UniApp 中实现图片上传功能，可以通过以下步骤完成：

1. 选择图片

使用 uni.chooseImage API 从相册或相机选择图片：

uni.chooseImage({
  count: 1, // 最多选择图片数量
  sourceType: ['album', 'camera'], // 来源：相册和相机
  success: (res) => {
    const tempFilePaths = res.tempFilePaths; // 临时文件路径
    this.uploadImage(tempFilePaths[0]); // 上传第一张图片
  }
});

2. 上传图片

通过 uni.uploadFile 将图片上传到服务器：

uploadImage(filePath) {
  uni.uploadFile({
    url: 'https://your-server.com/upload', // 替换为你的上传接口
    filePath: filePath,
    name: 'file', // 后端接收的文件字段名
    formData: {
      'user': 'test' // 附加数据
    },
    success: (res) => {
      console.log('上传成功', res.data);
      uni.showToast({ title: '上传成功' });
    },
    fail: (err) => {
      console.error('上传失败', err);
      uni.showToast({ title: '上传失败', icon: 'none' });
    }
  });
}

3. 后端处理

确保服务器有对应的接口接收文件（例如使用 Node.js + Multer、PHP 等）。

注意事项：

  • 临时路径：chooseImage 返回的是临时路径，需在上传后由服务器保存。
  • 网络请求：uploadFile 不支持 Authorization 头部，需通过 formData 或 Cookie 传递 token。
  • 平台差异：H5 可能需处理跨域问题，App 需配置网络权限。

完整示例（Vue 页面）：

<template>
  <view>
    <button @click="chooseImage">上传图片</button>
  </view>
</template>

<script>
export default {
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.uploadImage(res.tempFilePaths[0]);
        }
      });
    },
    uploadImage(filePath) {
      uni.uploadFile({
        url: 'https://your-api.com/upload',
        filePath,
        name: 'file',
        success: (res) => {
          uni.showToast({ title: '上传成功' });
        }
      });
    }
  }
}
</script>

按照以上步骤即可在 UniApp 中实现图片上传功能。

回到顶部