微信小程序实现图片上传（清晰版）
在微信小程序中，图片上传是一个常见的需求。下面我们将一步步地讲解如何实现图片上传功能。
1. 添加依赖首先，我们需要添加一个用于处理文件上传的依赖库。这里我们使用 `wx.uploadFile` 来完成这个任务。
```json{
"name": "myapp",
"version": "1.0",
"description": "",
"main": "app.js",
"dependencies": {
"weixin-js-sdk": "^2.3.4"
}
}
```
2. 创建上传组件接下来，我们需要创建一个用于处理图片上传的组件。我们可以在 `components` 目录下新建一个文件，例如 `upload.js`。
```javascript// components/upload/upload.jsComponent({
options: {
addGlobalClass: true,
},
properties: {
//上传的图片列表 images: Array,
// 是否显示删除按钮 showDelete: Boolean,
},
data: {},
methods: {
//选择图片 chooseImage() {
wx.chooseImage({
count:1, // 最多可以选择一张图片 sizeType: ['compressed'], // 只允许从相册选取压缩后的图片 sourceType: ['album', 'camera'], // 从相机或相册中选择图片 success: (res) => {
const tempFilePaths = res.tempFilePaths;
this.setData({
images: [...this.data.images, ...tempFilePaths],
});
},
});
},
// 删除图片 deleteImage(e) {
const index = e.currentTarget.dataset.index;
this.setData({
images: this.data.images.filter((item, i) => i !== index),
});
},
},
});
```
3. 在页面中使用上传组件在 `pages` 目录下新建一个文件，例如 `index.js`。
```javascript// pages/index/index.jsPage({
data: {
images: [],
},
chooseImage() {
this.selectComponent('upload').chooseImage();
},
});
```
4. 实现图片上传功能在 `components/upload/upload.js` 中，我们需要实现图片上传的逻辑。
```javascript// components/upload/upload.jsmethods: {
//选择图片 chooseImage() {
wx.chooseImage({
count:1, // 最多可以选择一张图片 sizeType: ['compressed'], // 只允许从相册选取压缩后的图片 sourceType: ['album', 'camera'], // 从相机或相册中选择图片 success: (res) => {
const tempFilePaths = res.tempFilePaths;
this.setData({
images: [...this.data.images, ...tempFilePaths],
});
//上传图片 this.uploadImage(tempFilePaths[0]);
},
});
},
//上传图片 uploadImage(file) {
wx.showLoading({
title: '正在上传...',
});
const formData = new FormData();
formData.append('file', file);
wx.cloud.callFunction({
name: 'upload',
data: formData,
success: (res) => {
wx.hideLoading();
console.log(res.result);
},
fail: (err) => {
wx.hideLoading();
console.error(err);
},
});
},
},
```
5. 在云函数中处理图片上传在 `cloud` 目录下新建一个文件，例如 `upload.js`。
```javascript// cloud/upload/upload.jsexports.main = async (event) => {
const file = event.file;
const filePath = `/tmp/${file.filename}`;
await wx.cloud.uploadFile({
cloudPath: 'images/' + file.filename,
fileContent: file.buffer,
});
return { result: '图片上传成功' };
};
```
6. 测试在 `pages/index/index.js` 中，我们可以测试一下图片上传功能。
```javascript// pages/index/index.jsPage({
data: {
images: [],
},
chooseImage() {
this.selectComponent('upload').chooseImage();
},
});
```
通过以上步骤，我们就实现了微信小程序中的图片上传功能。
