uniapp（h5）实现图片上传功能

原创

已于 2024-02-02 16:35:46 修改 · 1.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #uniapp

于 2024-02-02 12:02:31 首次发布

记录一下项目中遇到的问题

需求是h5有个签名板，当用户签完名后需要把签名照片上传给后端

第一步：实现签名版功能--返回base64格式图片

<template>
  <view>
    <view class="sign-content">
      <view>
        <view class="reset" @click="backClick" style="position:fixed;bottom: 466rpx;background:#fff;">返回</view>

        <view class="reset" @click="clearClick" style="position:fixed;bottom: 266rpx;background:#fff;">重写</view>

        <view class="reset" @click="saveClick" style="position:fixed;bottom: 66rpx;background: #39b54a;color:#fff;">确定
        </view>
      </view>

      <canvas class="sign" canvas-id="sign" @touchmove="move" @touchstart="start" @touchend="end" @touchcancel="cancel"
        @longtap="tap" disable-scroll="true" @error="error"></canvas>

      <view>
        <view style="transform: rotate(90deg);text-align: center;position:fixed;width:130rpx;right:-14rpx;top:46%;">签名板
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  let content = null;
  let touchs = [];

  export default {
    data() {
      return {
        isMove: false,
        createCanvas: false,
        outW: 0,
        outH: 0,
        windowsH: 0,
        windowsW: 0
      };
    },
    onLoad: function(options) {
      //获得Canvas的上下文
      content = uni.createCanvasContext('sign');
      this.windowsH = uni.getSystemInfoSync().windowHeight;
      this.windowsW = uni.getSystemInfoSync().windowWidth;
      //设置线的颜色
      content.setStrokeStyle('#000000');
      //设置线的宽度
      content.setLineWidth(5);
      //设置线两端端点样式更加圆润
      content.setLineCap('round');
      //设置两条线连接处更加圆润
      content.setLineJoin('round');
      // content.setFillStyle('white')
      // content.fillRect(0, 0, 750, 700)
      // content.draw()
    },
    methods: {
      backClick: function() {
        uni.navigateBack({
          delta: 1
        });
      },
      // 画布的触摸移动开始手势响应
      start: function(event) {
        // console.log("触摸开始" + event.changedTouches[0].x);
        // console.log("触摸开始" + event.