uniapp图片上传详解

一、uniapp图片上传组件

uniapp的上传组件可以通过选择图片或拍照进行图片上传，支持多种上传方式。使用上传组件可以快速实现上传功能，方便简单。

具体使用方法：

{ /* html */ }

   

二、uniapp上传多张图片

在使用uniapp图片上传时，我们在实际的项目中通常需要上传多张图片。这时需要用到循环语句进行多图上传

具体使用方法：

{ /* html */ }

   

<script>
export default {
  data() {
    return {
      imgList: []
    }
  },
  methods: {
    chooseImg() {
      uni.chooseImage({
        count: 9,
        success: (res) => {
          this.imgList = res.tempFilePaths
        }
      })
    }
  }
}
</script>

三、uniapp图片上传压缩

上传大图片会浪费用户的流量和时间，同时由于图片过大会增加服务器的处理时间。所以需要对图片进行压缩优化。

uniapp提供了图片压缩插件uni-image，将图片压缩后再进行上传，这样可以减少上传时间、流量和服务器的压力。

具体使用方法：

{ /* html */ }

   

<script>
import uniImage from '@dcloudio/uni-image';

export default {
  methods: {
    async handleFileUpload(file) {
      const compressedFile = await uniImage.compressImage({
        src: file.path,
        quality:50
      });
      //将压缩后的图片上传
      console.log(compressedFile.tempFilePath);
    }
  }
};
</script>

四、uniapp图片上传进度显示在图片上

在图片上传过程中，为了展现更好的用户体验，可以在图片上显示上传进度。

uniapp提供了上传组件，需要通过文件上传事件onFileUploadProgress进行操作，获取上传进度，然后将进度显示在图片上

具体使用方法：

{ /* html */ }

   

<script>
export default {
  data() {
    return {
      uploadProgress: 0,
    };
  },
  methods: {
    handleFileUploadProgress(progressEvent) {
      this.uploadProgress = parseInt((progressEvent.loaded / progressEvent.total) * 100);
    },
    async handleFileUpload(file) {
      //上传逻辑
    },
  },
};
</script>

五、uniapp图片上传功能

在uniapp中，我们可以通过获取图片路径和上传接口，实现图片上传功能。

具体实现方法：

{ /* html */ }

   

<script>
export default {
  methods: {
    handleFileUpload(file) {
      //获取图片路径
      let filePath = file.path;
      uni.uploadFile({
        url: 'http://yourserver.com/upload.php',
        filePath: filePath,
        name: 'file',
        header: {
          'content-type': 'multipart/form-data'
        },
        formData: {
          'user': 'test'
        },
        success: function(res) {
          console.log(res.data);
        }
      });
    }
  }
};
</script>

六、uniapp图片上传 web-h5移动端

uniapp图片上传支持h5和移动端。上传图片需要使用触发文件选择器来选择需要上传的图片，并将其转换为base64编码后上传至服务器端。

具体实现方法：

{ /* html */ }

   

<script>
export default {
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        const base64data = reader.result.split(',')[1];
        uni.request({
          url: '/upload',
          method: 'POST',
          dataType: 'json',
          data: {
            file: base64data
          }
        }).then((res) => {
          console.log(res.data);
        });
      };
    },
  },
};
</script>

七、uniapp图片上传携参数

有时候需要在上传图片时携带一个或多个参数，uniapp也提供了上传参数的方法。

具体实现方法：

{ /* html */ }

   

<script>
export default {
  methods: {
    handleFileUpload(file) {
      const { path } = file;
      const token = 'xxxx';
      uni.uploadFile({
        url: 'http://xxxx/upload',
        filePath: path,
        name: 'file',
        formData: {
          token,
        },
        success(response) {
          console.log(response);
        },
        fail(error) {
          console.log(error);
        },
      });
    },
  },
};
</script>

八、uniapp图片上传服务器

在实际项目中，图片上传一般是需要传到服务器。uniapp的图片上传，需要后台给出支持上传的接口，再通过上传的文件数据，利用AJAX等方式与后台建立连接，进行文件上传到服务器。

所以我们需要在后台建立支持图片上传的接口。

node.js代码：

{ /* javascript */ }
app.post('/upload', function(req, res) {
  var form = new formidable.IncomingForm();
  form.parse(req, function(err, fields, files) {
    var oldPath = files.file.path;
    console.log('old path: ' + oldPath);
    var suffix = /\.[^\.]+/.exec(files.file.name);
    var newPath = path.join(__dirname, '/uploads/' + Date.now() + suffix);
    console.log('new path: ' + newPath);
    fs.rename(oldPath, newPath, function(err) {
      if (err) {
        console.log(err);
        res.sendStatus(500);
      } else {
        console.log('upload success!');
        res.sendStatus(200);
      }
    });
  });
});

九、uniapp图片上传不显示

在uniapp中，图片上传后如果不显示，我们需要检查是否是地址错误，是否有特别的访问权限等问题。

解决方法：

{ /* javascript */ }
//设置服务器的访问地址为完整地址
//http://www.yourDomain.com/yourPath/image.png
//或者使用相对地址
//./yourPath/image.png
//或者使用uniapp提供的path属性

十、uniapp图片上传到腾讯云

腾讯云提供了云存储COS对象存储，可以用于存储大规模非结构化数据，如文档、图片、音视频等。

具体实现流程：

1. 登录腾讯云，进入「对象存储」中的控制台，创建桶；
2. 在桶内创建临时密钥，用于客户端获取临时证书；
3. 客户端如Android、iOS、H5调用 COS API，使用权限鉴定后上传文件。

Android、iOS、H5等平台使用腾讯云对象存储 COS对象存储 即可实现文件上传和下载的操作。

在uniapp中，可以通过利用uniapp的插件来实现图片上传到腾讯云的操作。

插件地址：https://ext.dcloud.net.cn/plugin?id=2701

具体使用方法：

{ /* html */ }

   

<script>
import cosSdk from '@/components/cos-js-sdk-v5';
const COS = cosSdk({
  SecretId: 'yourSecretId',
  SecretKey: 'yourSecretKey',
});

const config = {
  appId: 'yourAppId',
  bucket: 'yourBucketName',
};

export default {
  methods: {
    handleFileUpload(file) {
      const { path } = file;
      const name = `${Date.now()}-${file.name}`;
      const filePath = `image/${name}`; // 具体的路径结构可以自由定义

      COS.putObject({
        ...config,
        Key: filePath,
        StorageClass: 'STANDARD',
        Body: path,
        onProgress: (percent) => {
          console.log(`上传进度：${percent * 100}%`);
        },
      }, (err, data) => {
        if (err) {
          console.log(err);
          return;
        }
        
        // 上传成功
        console.log(data);
      });
    },
  },
};
</script>