小程序如何上传图片js前端代码

小程序上传图片的前端代码

在小程序开发中，上传图片是一个常见的功能。通过调用微信小程序的API、选择图片、预览图片、上传图片等步骤，可以实现这一功能。本文将详细介绍小程序上传图片的前端代码实现，并给出相关示例。

一、选择图片

选择图片是上传图片的第一步。微信小程序提供了wx.chooseImage API，可以让用户从相册中选择图片或直接拍摄。

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: (res) => {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths;
    console.log(tempFilePaths);
    // 这里可以对图片路径进行处理，比如存储到页面数据中
  }
});

在上面的代码中，count表示可以选择的图片数量，sizeType表示可以选择的图片类型，sourceType表示可以选择的图片来源。

二、预览图片

在用户选择图片后，通常需要预览图片。微信小程序提供了wx.previewImage API，可以实现图片预览功能。

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
});

三、上传图片

选择并预览图片后，下一步就是上传图片了。微信小程序提供了wx.uploadFile API，可以将图片上传到服务器。

wx.uploadFile({
  url: 'https://example.com/upload', // 仅为示例，需填写实际接口
  filePath: tempFilePaths[0],
  name: 'file',
  formData: {
    'user': 'test'
  },
  success: (res) => {
    const data = res.data;
    //do something
    console.log(data);
  }
});

在上面的代码中，url是服务器的上传接口地址，filePath是要上传的文件路径，name是文件对应的key，formData可以用来提交额外的表单数据。

四、处理上传结果

通常在上传图片后，需要处理服务器返回的结果，比如显示上传成功或失败的信息，更新页面数据等。

wx.uploadFile({
  url: 'https://example.com/upload', // 仅为示例，需填写实际接口
  filePath: tempFilePaths[0],
  name: 'file',
  formData: {
    'user': 'test'
  },
  success: (res) => {
    const data = JSON.parse(res.data);
    if (data.success) {
      wx.showToast({
        title: '上传成功',
        icon: 'success',
        duration: 2000
      });
      // 更新页面数据，比如显示上传的图片
    } else {
      wx.showToast({
        title: '上传失败',
        icon: 'none',
        duration: 2000
      });
    }
  },
  fail: (err) => {
    wx.showToast({
      title: '上传失败',
      icon: 'none',
      duration: 2000
    });
    console.error(err);
  }
});

五、总结

通过上述步骤，微信小程序可以实现图片的选择、预览和上传功能。以下是完整的代码示例：

Page({
  data: {
    imageUrl: ''
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        this.setData({
          imageUrl: tempFilePaths[0]
        });
        this.uploadImage(tempFilePaths[0]);
      }
    });
  },
  uploadImage(filePath) {
    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath: filePath,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: (res) => {
        const data = JSON.parse(res.data);
        if (data.success) {
          wx.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 2000
          });
          this.setData({
            imageUrl: data.url // 假设服务器返回上传图片的URL
          });
        } else {
          wx.showToast({
            title: '上传失败',
            icon: 'none',
            duration: 2000
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '上传失败',
          icon: 'none',
          duration: 2000
        });
        console.error(err);
      }
    });
  },
  previewImage() {
    wx.previewImage({
      current: this.data.imageUrl,
      urls: [this.data.imageUrl]
    });
  }
});

在这个示例中，用户可以选择图片，上传图片并预览上传的图片。通过分步骤实现，可以更好地理解每个步骤的作用和实现方式。希望这篇文章能够帮助你更好地实现小程序上传图片的功能。