Uniapp实现图片上传

在Uniapp中实现图片上传功能，需要使用uni.chooseImage()选择图片，使用plus.zip.compressImage()进行图片压缩，使用uni.uploadFile()将本地资源上传到服务器。下面详细介绍这些步骤：

1. 选择图片
   使用uni.chooseImage()方法选择图片，该方法会打开相册或相机让用户选择图片。选择完成后，可以在成功的回调中给this.imgBg赋值，用于后续的图片压缩和上传。

   uni.chooseImage({
   count: 1, // 默认9
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
   success: function (res) {
   // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
   this.imgBg = res.tempFilePaths[0];
   }
   });

2. 图片压缩
   使用plus.zip.compressImage()方法对选择的图片进行压缩。可以将压缩后的图片给that.imgBgArr赋值，用于后续的图片上传。

   plus.zip.compressImage({
   src: this.imgBg, // 图片路径
   quality: 100, // 压缩质量，范围0-100，默认100
   success: function (compressRes) {
   // 压缩成功后的图片路径列表数组，可以用于上传或预览等操作
   that.imgBgArr = compressRes.files;
   }
   });

3. 上传图片
   使用uni.uploadFile()方法将本地资源上传到服务器。在成功的回调中，后端会解析拿到的图片资源并返回一个临时路径和绝对路径，可以给this.imgBgUrl和imgBgArrUrl赋值。最后在提交表单时，将临时路径和绝对路径加到表单接口参数中一起调用接口上传。

   uni.uploadFile({
   url: 'http://example.com/upload', // 服务器地址
   filePath: that.imgBgArr[0], // 文件路径
   name: 'file', // 文件上传的key，对应请求的param的key，不包含在url后面
   success: function (uploadFileRes) {
   // 返回文件上传的临时路径和绝对路径信息，可以用于后续请求临时路径进行预览等操作
   this.imgBgUrl = uploadFileRes.tempFilePath;
   imgBgArrUrl = uploadFileRes.filePath;
   }
   });

4. 其他功能函数
   除了上述的基本功能外，还可以添加其他功能函数，比如图片删除（直接给图片赋空字符串）和图片预览（调用uni.previewImage(OBJECT)方法）等。这些功能可以根据实际需求进行添加和完善。