写一个上传文件并手写签名的微信小程序代码

在微信小程序中实现上传文件和手写签名的功能，需要分成几个步骤来完成：

1. **文件上传**：使用微信小程序的 `wx.uploadFile` API 来实现文件上传的功能。这个API能够将本地资源上传到开发者服务器。
2. **签名功能**：利用canvas组件来实现手写签名。用户可以在canvas上进行签名，然后通过 `wx.canvasToTempFilePath` 将签名转换为图片路径。
3. **后端接口**：需要一个后端服务来接收上传的文件和签名图片，可以使用Node.js、PHP、Java等语言来搭建。

下面是一个简单的实现示例：

**前端代码（微信小程序）**:

1. WXML文件：

<view class="container">
  <canvas canvas-id="signature" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
  <button bindtap="uploadFile">上传文件</button>
  <button bindtap="uploadSignature">上传签名</button>
</view>

2. WXSS文件（设置样式）:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

canvas {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

3. JS文件：

Page({
  data: {
    // 签名的base64数据
    signatureData: ''
  },
  touchStart: function(e) {
    // 开始触摸事件
  },
  touchMove: function(e) {
    // 移动触摸事件
  },
  touchEnd: function(e) {
    // 结束触摸事件
    this.setData({
      signatureData: this.data.canvasData
    });
  },
  uploadFile: function() {
    var that = this;
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success(res) {
        const filePath = res.tempFiles[0].path;
        wx.uploadFile({
          url: '你的上传文件的服务器地址', // 开发者服务器的地址
          filePath: filePath,
          name: 'file',
          success(uploadRes) {
            console.log(uploadRes.data);
            // 这里可以处理服务器返回的数据，如上传成功后的提示等
          }
        })
      }
    })
  },
  uploadSignature: function() {
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'signature',
      success(res) {
        that.setData({
          signatureData: res.tempFilePath
        });
        wx.uploadFile({
          url: '你的上传签名的服务器地址', // 开发者服务器的地址
          filePath: res.tempFilePath,
          name: 'signature',
          success(uploadRes) {
            console.log(uploadRes.data);
            // 这里可以处理服务器返回的数据，如上传成功后的提示等
          }
        })
      }
    })
  }
})

**后端代码示例（使用Node.js）**:

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer用于处理文件上传
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 上传文件存储的位置
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
});

const upload = multer({ storage: storage });

// 文件上传接口
app.post('/upload', upload.single('file'), function(req, res){
  // 文件信息可以通过req.file获取
  // 文件保存的路径是 req.file.path
  // 返回成功结果给前端
  res.send('上传成功');
});

// 签名图片上传接口
app.post('/upload-signature', upload.single('signature'), function(req, res){
  // 处理逻辑同上
  res.send('签名图片上传成功');
});

app.listen(3000, function() {
  console.log('服务器启动在3000端口');
});

需要注意的是，上述代码仅为示例，实际使用中需要根据具体需求进行调整。另外，在使用multer上传文件时，你需要确保服务器有足够的权限来保存上传的文件，并且要处理好安全性问题，如验证上传文件的类型等。