微信原生实现一个简易的图片上传功能

**微信原生实现一个简易的图片上传功能**

在微信小程序中，图片上传是一个常见的需求。虽然我们可以使用第三方库来实现这个功能，但是如果你想自己实现一个简易的图片上传功能，那么这篇文章将会给你提供一个基本的示例。

**1.选择图片**

首先，我们需要让用户选择一张图片。我们可以使用微信小程序中的 `chooseImage` API 来实现这一点。

javascript//选择图片const chooseImage = async () => {
 const res = await wx.chooseImage({
 count:1, // 只允许选择一张图片 sizeType: ['original'], // 只允许选择原图 sourceType: ['album'] // 从相册中选择 })
 console.log(res)
}

**2. 预览图片**

在用户选择了图片之后，我们需要预览一下这张图片。我们可以使用微信小程序中的 `previewImage` API 来实现这一点。

javascript// 预览图片const previewImage = async (imgUrl) => {
 await wx.previewImage({
 current: imgUrl, // 当前显示的图片 urls: [imgUrl] // 需要预览的图片列表 })
}

**3.上传图片**

在用户选择了图片并预览过之后，我们需要将这张图片上传到服务器。我们可以使用微信小程序中的 `uploadFile` API 来实现这一点。

javascript//上传图片const uploadImage = async (imgUrl) => {
 const res = await wx.uploadFile({
 url: ' //上传的地址 filePath: imgUrl, // 需要上传的文件路径 name: 'file' // 文件名 })
 console.log(res)
}

**4. 整合所有功能**

最后，我们需要将所有的功能整合在一起。我们可以使用微信小程序中的 `button` 组件来实现这一点。

javascript// 整合所有功能const chooseAndUploadImage = async () => {
 const res = await chooseImage()
 if (res) {
 const imgUrl = res.tempFilePaths[0]
 await previewImage(imgUrl)
 await uploadImage(imgUrl)
 }
}

**5. 使用示例**

最后，我们需要使用这个功能。我们可以在 `app.json` 文件中添加一个按钮来实现这一点。

json{
 "pages": [
 {
 "path": "index",
 "component": "index/index"
 }
 ],
 "window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "",
 "onLoad": function(options) {
 // Do something when page load.
 },
 "formatWebP": true,
 "enablePullDownRefresh": false }
}

json{
 "usingComponents": {},
 "navigationBarTitleText": "",
 "navigationBarBackgroundColor": "#fff",
 "backgroundColor": "#f7f7f7"
}

html

 选择并上传图片

javascript// index.jsPage({
 chooseAndUploadImage: function() {
 const chooseAndUploadImage = async () => {
 const res = await chooseImage()
 if (res) {
 const imgUrl = res.tempFilePaths[0]
 await previewImage(imgUrl)
 await uploadImage(imgUrl)
 }
 }
 chooseAndUploadImage()
 }
})

**6. 总结**

在本文中，我们实现了一个简易的图片上传功能。我们使用微信小程序中的 `chooseImage`、`previewImage` 和 `uploadFile` API 来实现这一点。最后，我们整合所有功能并使用示例来演示这个功能。

**7. 后记**

如果你想自己实现一个更复杂的图片上传功能，那么这篇文章将会给你提供一个基本的示例。你可以根据自己的需求进行扩展和修改。

**8. 参考资料**

* 微信小程序官方文档： 微信小程序 API 文档： 微信小程序 API 文档：