uniapp微信小程序图片上传

<template><view class="content"><view class="button"><button @click="chooseFile" value="请选择文件">请选择文件</button></view><view class="img" v-for="imgPath in imgPaths"><image class="img_img" :src="imgPath"></image></view><button @click="getImg">savsaf</button><image :src="QRImg"></image></view></template><script>export default {data() {return {imgPaths:[],    //上传的图片保存QRImg:""        //查询的图片base64编码保存}},methods: {async getImg() {uni.request({url:'http://localhost:6003/Manage/test',method:'POST',responseType: "arraybuffer",success: (res) => {//将arrayBuffer数据转换成base64格式即可显示，这里的uni.arrayBufferToBase64(res.data)使用substring是因为不知道为什么会多出196个字符，删掉就可以显示图片了this.QRImg = 'data:image/jpeg;base64,'+ uni.arrayBufferToBase64(res.data).substring(196,uni.arrayBufferToBase64(res.data).length)}})},chooseFile(e){var that = this;uni.chooseImage({count: 9, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function (res) {that.imgPaths = res.tempFilePaths;for (var i = 0; i < that.imgPaths.length; i++) {uni.uploadFile({url: 'http://localhost:6003/Manage/uploadImg', //仅为示例，非真实的接口地址filePath: that.imgPaths[i],name: 'uploadFile',formData: {'user': 'test'},success: (uploadFileRes) => {console.log(uploadFileRes);}});}}});}}}</script>

SpringBoot后端测试代码，另外数据库中字段为Blob（MediumBlob、LongBlob）类型。

    //插入图片到数据库，格式为blob@PostMapping("/uploadImg")public void uploadImg(MultipartFile uploadFile, HttpServletRequest req) throws IOException, SQLException {Blob blob = new SerialBlob(uploadFile.getBytes());houseimgMapper.insertimg(blob);}//将数据库获取到的blob返回给前端/*** 图片路径*///注意，我的实体类定义img的类型为：  private byte[] imgurl;@PostMapping("/test")public  ResponseEntity<byte[]> uploadImg() throws IOException, SQLException {byte[] imageContent = houseimgMapper.selectById(5).getImgurl();return new ResponseEntity<>(imageContent, HttpStatus.OK);}

uniapp微信小程序图片上传相关推荐

微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
uniApp 生成微信小程序图片上传提示 fail url not in domain list 的解决方法
问题表现: uniApp 生成微信小程序,获取内容程序不报错,但是图片上传提示 fail url not in domain list 错误. 问题分析: 微信小程序:服务器域名配置每个微信小程序需 ...
微信小程序图片上传（文字识别）
要点:OCR文字识别图片上传在最近的项目中遇到需要进行OCR识别,中间遇到的坑记录一下 OCR接口:采用百度OCR通用文字识别在进行调试过程中遇到下列问题: 百度ocr接口1.对图片经行base ...
微信小程序图片上传与内容安全审核
文章目录原由内容审核种类小程序云开发图片检测创建云函数编写图片检测代码小程序图片处理图片上传图片压缩云函数安全检测接入文本检测最后的坑原由之前有开发一个微信小程序,拥有图片 ...
微信小程序图片上传到java后台
前言关于云存储的文件上传,我想说的真的挺多的,这是一篇纯原创的基于小程序或者是SpringBoot的云存储的全过程. 整篇教学很细很细,适合于所有的java学习者,特别是刚刚结束学习java想要练 ...
微信小程序-图片上传
微信小程序有原生的API接口,来进行图片的选取.上传 wx.chooseImage(Object object) | 微信开放文档 (qq.com)https://developers.weixin. ...
C#实现微信小程序图片上传
C#后端接口: public string FileUploads() {string parameters = "";try{string path = "/tmp/& ...
java 微信图片上传_微信小程序图片上传java端以及前端实现
小程序的图片上传与传统的图片上传方式有一些不一样如果你有幸看到这篇文章,恭喜你,你可以完美解决了. 话不多说,前后端代码一并奉上: (基于springmvc ) @Controller @Reque ...

uniapp微信小程序图片上传

uniapp微信小程序图片上传相关推荐

最新文章

热门文章