TARO小程序canvas签名图片上传服务器

MIKE-zi

于 2021-08-26 18:45:06 发布

阅读量1.1k

点赞数 1

分类专栏： Taro入门文章标签： taro签名上传 taro上传图片小程序数字签名

本文链接：https://blog.csdn.net/lee727n/article/details/119937989

版权

Taro入门专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文档详细介绍了如何在Taro小程序中使用canvas生成图片，并通过uploadFile方法上传到服务器。首先，利用Taro.canvasToTempFilePath获取图片路径，然后通过Taro.uploadFile将文件发送到后台指定接口，同时附带formData。注意，'name'字段是后端识别图片数据的key。后台需配置支持POST请求的接口来接收并处理这些上传的数据。

摘要由CSDN通过智能技术生成

taro小程序实现签名上传，发现介绍的很少，所以整理出来给大家一些帮助。首先canvas画板会生成一个图片。这个图片只是一个路径。不同于自己写的上传接口。将图片data发送给后台。这里我们看不到临时路径里的路径。所以需要借助uploadfile的方法。将路径的内容传到指定位置

    // 生成图片 
    Taro.canvasToTempFilePath({
      canvasId: 'canvas',
      success: res => {
        console.log(res.tempFilePath)
        this.setState({
          tempFilePath: res.tempFilePath
        })
        Taro.uploadFile({
          url: 'https://test/signUpload/',
          filePath: res.tempFilePath,
          name: 'file',
          formData: {
            'user': 'test'
          },
          success(res) {
            let data = res.data
            //post接口
            console.log('上传成功数据返回string-----', data)
            let obj = JSON.parse(data)
            console.log('上传成功数据,图片路径-----', obj.data)
          }
        })

      },
      fail(err) {
        console.log(err)
      }
    })

这里需要让你的后台同学配置一个Post的接口请求。uploadfile方法就会替你去把数据放到目标路径。同时成功回调里的可以接收到你的后台返回的信息。拿到你自己的服务器返给你的图片存放地址。另外说明一下name字段不是名字。是后台找到你图片数据的key。