微信小程序开发（二）图片上传+服务端接收详解

我来为您详细讲解“微信小程序开发（二）图片上传+服务端接收详解”的完整攻略。

文章概述

本文主要介绍微信小程序中图片上传的方法，以及服务端接收图片的实现方法。主要包括以下内容：

1. 小程序中基于wx.chooseImage()实现图片上传
2. 服务端使用Node.js and express框架来接收图片并保存

小程序中基于wx.chooseImage()实现图片上传

在微信小程序中，使用wx.chooseImage()方法来选取本地图片并上传到服务器，该方法的主要调用方式如下所示：

wx.chooseImage({
  count: 1,   // 最多可以选择的图片张数
  sizeType: ['original', 'compressed'],  // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'],  // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    // 图片上传成功之后的操作
  },
  fail: function (res) {
    // 图片上传失败之后的操作
  }
})

成功选择图片后，我们可以通过wx.uploadFile()方法将图片上传到指定的服务器上，该方法主要调用方式如下所示：

wx.uploadFile({
  url: '服务器地址',    // 上传图片的服务器地址
  filePath: '要上传的图片的本地路径',   // 要上传的图片的本地路径
  name: '图片文件在后台对应的名称，如file',   // 上传图片文件时的参数名称
  formData: {
    'user': 'test'   // 上传图片的其他参数
  },
  success: function (res) {
    //图片上传成功之后的操作
  },
  fail: function (res) {
    //图片上传失败之后的操作
  }
})

下面，举一个实例来说明如何使用wx.chooseImage()方法进行图片上传：

wx.chooseImage({
  count: 1,
  success: function(res) {
    var tempFilePaths = res.tempFilePaths;
    console.log('选择图片的路径为：', tempFilePaths[0]);
    wx.uploadFile({
      url: 'http://localhost:3000/upload',
      filePath: tempFilePaths[0],
      name: 'file',
      header: {
        'content-type': 'multipart/form-data'
      },
      formData: {
        'user': 'test'
      },
      success: function(res) {
        var data = res.data;
        console.log('图片上传成功后的响应内容为：', data);
      },
      fail: function(res) {
        console.log('图片上传失败：', res);
      }
    })
  },
  fail: function(res) {
    console.log('获取图片失败：', res);
  }
})

服务端使用Node.js and express框架来接收图片并保存

服务端使用Node.js and express框架来接收图片并保存的代码实现如下：

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');

const app = express();
const upload = multer({
  storage: multer.diskStorage({
    // 自定义上传位置
    destination: function(req, file, cb) {
      cb(null, './uploads'); // 保存到uploads文件夹下
    },
    // 自定义上传的文件名称
    filename: function(req, file, cb) {
      const fileNameArr = file.originalname.split('.');
      const extensionName = fileNameArr[fileNameArr.length - 1];
      const filename = Date.now() + '_' + Math.floor(Math.random() * (99999 - 10000 + 1) + 10000) + '.' + extensionName;
      cb(null, filename);
    }
  })
});

// 设置允许跨域访问该服务
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  next();
});

// 解析post请求参数
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 处理上传图片的请求
app.post('/upload', upload.single('file'), function(req, res, next) {
  if(req.file) {
    console.log('文件上传成功：', req.file);
    res.json({
      status: 200,
      message: 'file upload success',
      data: {
        filename: req.file.filename
      }
    });
  } else {
    console.log('文件上传失败：', err);
    res.json({
      status: 500,
      message: 'file upload fail'
    });
  }
});

// 启动服务
app.listen(3000, function() {
  console.log('服务已经启动，可以通过 http://localhost:3000 进行访问');
})

此时，我们就通过使用Node.js and express框架成功实现了服务端的接收图片并保存操作。服务运行起来后，运行如下的测试代码查看图片是否成功上传：

const http = require('http');
const fs = require('fs');
const path = require('path');

const options = {
  hostname: 'localhost',
  port: 3000,
  path: '/upload',
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data'
  }
};

const req = http.request(options, (res) => {
  res.setEncoding('utf8');
  res.on('data', (chunk) => {
    console.log(`响应主体: ${chunk}`);
  });
  res.on('end', () => {
    console.log('响应中已无数据。');
  });
});

req.on('error', (e) => {
  console.error(`请求遇到问题: ${e.message}`);
});
const filepath = path.join(__dirname, 'images/avatar.png');
const boundaryKey = Math.random().toString(16);
const enddata = '\r\n----' + boundaryKey + '--';

var fileStream = fs.createReadStream(filepath);
var length = fs.statSync(filepath).size;
req.setHeader('content-type', 'multipart/form-data; boundary=--' + boundaryKey);
req.setHeader('Content-Length', length + Buffer.byteLength(enddata));
req.setHeader('Pragma', 'no-cache');
req.setHeader('Cache-Control', 'no-cache');
fileStream.addListener('data', function(chunk) {
  req.write(chunk);
});

fileStream.addListener('close', function() {
  req.end(enddata);
});

以上就是本篇文章对“微信小程序开发（二）图片上传+服务端接收详解”的完整攻略讲解，希望能够对您有所帮助。