uniapp上传图片名字保持不变

1. 前言

在开发移动应用时，涉及到上传图片这一功能十分常见。但是，很多开发者在实现上传图片功能时，会遇到一个问题，就是上传的图片名字会被系统随机生成，不能保持原有的名字。那么我们如何才能做到上传图片名字保持不变呢？本文将针对此问题进行详细介绍。

2. 上传图片

2.1. 上传图片的方法

在uniapp中，上传图片的方式有很多种，如：uni.uploadFile()、uni.chooseImage()等。本文将以上述两种方式为例进行说明。

2.2. uni.uploadFile()

uni.uploadFile()方法可以上传本地资源至服务器，其中最基本的参数包括：url、filePath、name。其中，url表示服务器接口地址，filePath表示要上传文件资源的本地路径，name表示要上传文件资源的名称。如果此处不指定name参数，则上传的文件名为系统自动生成的随机字符串。

uni.uploadFile({
  url: 'http://example.weixin.qq.com/upload', // 服务器接口地址
  filePath: 'xxx', // 要上传文件资源的本地路径
  name: 'file', // 要上传文件资源的名称
  success: () => {
    //...
  },
  fail: () => {
    //...
  }
});

2.3. uni.chooseImage()

uni.chooseImage()方法可以从本地相册或相机中选择图片或拍照，并将选择的图片资源返回。其中，最基本的参数包括：count、sizeType、sourceType。其中，count表示最多可以选择的图片数量，sizeType表示可以选择的图片尺寸类型（原图、压缩图），sourceType表示可以选择的来源类型（相册、相机）。

uni.chooseImage({
  count: 1, // 最多可以选择的图片数量
  sizeType: ['original', 'compressed'], // 可以选择的图片尺寸类型
  sourceType: ['album', 'camera'], // 可以选择的来源类型
  success: (res) => {
    // res.tempFilePaths 选定照片的本地文件路径列表
  },
  fail: () => {
    //...
  }
});

3. 上传图片名字保持不变的实现

3.1. 获取原图片文件名

在上传图片时，我们需要获取图片原来的文件名。有时候，图片的文件名可能并不是用户所希望的，此时，我们可以在前端对图片文件名进行处理。

通过res.tempFilePaths[0]可以获取到图片的本地路径，在图片路径字符串中，最后的一段字符串即为图片的文件名。

uni.chooseImage({
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    const originalFilename = tempFilePaths[0].split('/').pop(); // 获取原图片文件名
  },
  fail: () => {
    //...
  }
});

3.2. 上传图片至服务器

获取原图片文件名后，我们可以将该文件名作为上传文件时指定name参数的值，从而保证上传后的文件名与原文件名相同。下面以uni.chooseImage()方法为例进行说明：

uni.chooseImage({
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    const originalFilename = tempFilePaths[0].split('/').pop(); // 获取原图片文件名
    uni.uploadFile({
      url: 'http://example.weixin.qq.com/upload', // 服务器接口地址
      filePath: tempFilePaths[0], // 要上传文件资源的本地路径
      name: originalFilename, // 要上传文件资源的名称
      success: () => {
        //...
      },
      fail: () => {
        //...
      }
    });
  },
  fail: () => {
    //...
  }
});

4. 总结

通过对uniapp中上传图片的两种方式uni.uploadFile()和uni.chooseImage()的介绍，我们了解了如何获取图片原始文件名，并将该文件名作为上传文件的名称从而实现了上传图片名字保持不变的操作。