uniAPP上传图片一直失败怎么办-猿码集

1. uniAPP上传图片失败的原因

在uniAPP开发中，上传图片是一项非常基础的操作。但是，在操作过程中，可能会遇到上传图片失败的情况。出现这种问题，主要原因有以下几点：

1.1 图片大小超限

上传图片的大小是有限制的，如果图片的大小超过了规定上传大小，那么就会出现上传失败的情况。


//示例代码（上传图片限制为2MB）
uploader.on('fileQueued', function(file) {
  if (file.size > 2*1024*1024) {
    alert('上传图片大小不能超过2MB');
    return false;
  }
});

1.2 网络不稳定

网络不稳定或者网络环境差，也会导致上传失败的情况，这个情况比较普遍。

1.3 服务器问题

上传图片是要将图片保存在服务器上的，如果上传图片的服务器出现问题，那么上传就会失败。

2. uniAPP上传图片失败的解决方法

出现上传图片失败的情况，应该及时采取措施解决问题。下面就是几种解决方法。

2.1 缩小图片

如果上传图片的大小超过规定的大小，那么就需要对图片进行缩小。可以通过JS或者工具进行实现。


//示例代码（使用JS进行图片大小缩小）
compressImg: function() {
  var _this = this;
  var file = this.$refs.uploadInput.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    var img = new Image();
    img.src = e.target.result;
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var width = img.width;
      var height = img.height;
      var scale = width/height;
      if (width > 800) {
        width = 800;
        height = width/scale;
      }
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      var base64 = canvas.toDataURL(file.type, 0.8);
      _this.upload(base64);
    };
  };
},

2.2 换个网络环境

如果网络环境差，那么就需要换个网络环境再重试上传操作。

2.3 换个服务器

如果上传图片的服务器出现问题，那么就要找到一个稳定的服务器再进行上传。

3. uniAPP上传图片注意事项

在进行uniAPP上传图片操作时，还需要注意以下几点：

3.1 图片类型限制

在上传图片时，为了保证图片的正确性和安全性，需要对图片类型进行限制，只允许上传指定类型的图片。


//示例代码（只允许上传jpg、jpeg和png类型图片）
uploader.accept = {
  title: 'Images',
  extensions: 'jpg,jpeg,png',
  mimeTypes: 'image/*'
};

3.2 图片压缩处理

为了保证上传图片大小不超过规定大小，需要对图片进行压缩处理。


//示例代码（使用JS进行图片压缩处理）
compressImg: function() {
  var _this = this;
  var file = this.$refs.uploadInput.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    var img = new Image();
    img.src = e.target.result;
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var width = img.width;
      var height = img.height;
      var scale = width/height;
      if (width > 800) {
        width = 800;
        height = width/scale;
      }
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      var base64 = canvas.toDataURL(file.type, 0.8);
      _this.upload(base64);
    };
  };
},

3.3 错误处理

在上传操作中，需要处理可能出现的错误，确保上传操作的正确性。


//示例代码（使用uni.request上传图片并进行错误处理）
upload: function(base64) {
  var _this = this;
  uni.showLoading({
    title: '上传中...'
  });
  uni.request({
    url: 'http://xxx.com/upload',
    method: 'POST',
    header: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: {
      file: base64
    },
    success: function(res) {
      if (res.statusCode === 200) {
        uni.hideLoading();
        uni.showToast({
          title: '上传成功',
          icon: 'none',
          duration: 2000
        });
      } else {
        uni.hideLoading();
        uni.showToast({
          title: '上传失败',
          icon: 'none',
          duration: 2000
        });
      }
    },
    fail: function(err) {
      uni.hideLoading();
      uni.showToast({
        title: err.errMsg,
        icon: 'none',
        duration: 2000
      });
    }
  });
},

4. 总结

上传图片是uniAPP开发中非常基础的一项操作，但是在操作过程中可能会出现上传失败的情况。对于上传失败的情况，可以先检查图片大小是否超限、网络是否稳定和服务器是否出现问题，采取相应的处理措施解决问题。在进行上传操作时，还需要注意上传图片类型的限制、图片压缩处理和错误处理等问题。

uniAPP上传图片一直失败怎么办