uniapp 相册选中图片上传

UniApp 是一个基于 Vue.js 的跨平台 UI 库和框架，它旨在提供一套统一的开发体验，支持快速开发原生应用。在 UniApp 中，使用相册功能让用户选择图片并上传至服务器通常涉及以下几个步骤：

1. **引入权限和插件**：首先，确保已导入所需的照片权限，并可能需要安装一个专门处理图片操作的插件，如 uni-image-picker，可以通过 UniApp 的插件市场安装。

// 在main.js中注册插件
import ImagePicker from '@dcloudio/image-picker'
Vue.use(ImagePicker)

2. **调用相册接口**：在需要选择图片的地方，使用 `ImagePicker` API 来请求用户的相册权限，然后选择图片。

// 在一个组件的方法中
async pickImage() {
  const result = await ImagePicker.pick({
    sourceType: ['album', 'camera'], // 可选 'album' 或 'camera'
    albumMode: true, // 是否显示相册模式，默认为 false
    success(res) {
      if (res.localIds.length > 0) {
        const tempFilePaths = res.tempFilePaths; // 选中的图片临时路径
        // 进行上传操作...
      }
    },
    cancel() {},
    fail(err) {}
  })
}

3. **图片上传**：有了临时文件路径后，你可以使用 UniApp 提供的网络请求库（如 axios 或者 UniApp 自带的 Network API）将图片数据上传到服务器。

const uploadUrl = 'your_server_upload_url';
async function uploadImage(tempFilePath) {
  const response = await axios.post(uploadUrl, {
    file: tempFilePath
  });
  // 处理上传结果...
}
pickImage().then(() => {
  uploadImage(tempFilePaths).then(() => {
    console.log('图片上传成功');
  }).catch((err) => {
    console.error('图片上传失败:', err);
  });
});