一起分析uni-app怎么实现上传图片

uni-app简介

uni-app是一款跨平台开发工具，可以使用Vue语法进行开发同时支持发布到多个主流平台，例如微信小程序、App Store、华为应用市场等等，从而实现一次开发，多端发布的效果。其中，图片上传是在实际开发中难免会遇到的需求，因此，本文将详细介绍uni-app中如何实现图片上传功能。

上传图片的实现思路

一般来说，上传图片的基本流程如下：

通过input[type=file]标签选取图片

将图片转化成二进制格式

通过ajax或其他方式将二进制数据上传到服务器

基于此流程，我们可以考虑采用uni-app官方提供的uni.uploadFile() API，代码实现如下：

 uni.chooseImage({
   count: 1, // 最多可以选择的图片张数
   success: function (res) {
     uni.uploadFile({
       url: 'your upload url',
       filePath: res.tempFilePaths[0],
       name: 'file',
       formData: {
         'user': 'test'
       },
       success: function (uploadRes) {
         console.log('upload success', uploadRes)
       },
       fail: function (e) {
         console.log('upload fail', e)
       }
     })
   }
 })

函数参数说明

uni.chooseImage

uni.chooseImage是uni-app官方提供的选择图片的API，其参数说明如下：

uni.uploadFile

uni.uploadFile是uni-app官方提供的上传图片的API，其参数说明如下：

注意事项

在使用uni.uploadFile()时，需要注意以下几点：

uni.uploadFile()只支持上传本地资源，不支持网络资源

微信小程序中，默认上传文件大小为2M，其他平台可以通过修改服务器端配置实现

由于微信小程序有上传文件大小限制，为了保证上传成功，我们可以使用以下方法解决:

uni.compressImage({
  src: res.tempFilePaths[0],
  quality: 50,
  success: function (compressRes) {
    uni.uploadFile({
      url: 'your upload url',
      filePath: compressRes.tempFilePath,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function (uploadRes) {
        console.log('upload success', uploadRes)
      },
      fail: function (e) {
        console.log('upload fail', e)
      }
    })
  },
  fail: function (e) {
    console.log('compress fail', e)
  }
})

这里通过使用uni.compressImage()将图片压缩到50%的质量后再进行上传，可以有效的规避图片太大导致上传失败的问题。

总结

本文主要介绍了uni-app中如何实现上传图片的功能，通过选择图片后，使用uni.uploadFile()将图片上传到指定的服务器，从而实现图片上传的操作。同时，本文也针对微信小程序的文件上传大小限制，提供了一种解决方案，帮助开发者更好的完成相应的操作。