uniapp怎么上传二进制图片

#uniapp怎么上传二进制图片| 来源: 网络整理| 查看: 265

uniapp怎么上传二进制图片发布时间：2022-06-30 14:11:24 来源：亿速云阅读：68 作者：iii 栏目：开发技术

这篇文章主要介绍“uniapp怎么上传二进制图片”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“uniapp怎么上传二进制图片”文章能帮助大家解决问题。

功能需求：

前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。

思路如下：

前端选择本地的png、jpg、等格式的图片，将图片以二进制的形式传到后端服务器，后端对二进制图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。

首先

我们看一下uniapp的官方文档：https://uniapp.dcloud.io/api/media/image?id=chooseimage

大概是这样的

先写一个模拟的demo

1：首先我是是用了colorUI的框架，在项目里面引入

在page底下的vue文件引入

@import "../../colorui/main.css"; @import "../../colorui/icon.css";

这样一来，就不需要写什么样式了，直接使用写好的就行了。

图片上传 {{imgList.length}}/4 export default { data() { return { imgList: [], // modalName: null, }; }, methods: { ChooseImage() { uni.chooseImage({ count: 4, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'], //从相册选择 success: (res) => { if (this.imgList.length != 0) { this.imgList = this.imgList.concat(res.tempFilePaths) } else { this.imgList = res.tempFilePaths } } }); }, ViewImage(e) { uni.previewImage({ urls: this.imgList, current: e.currentTarget.dataset.url }); }, //删除 DelImg(e) { uni.showModal({ title: '删除', content: '确定要删除这张图片？', cancelText: '取消', confirmText: '删除', success: res => { if (res.confirm) { this.imgList.splice(e.currentTarget.dataset.index, 1) } } }) }, } } @import "../../colorui/main.css"; @import "../../colorui/icon.css"; .cu-form-group .title { min-width: calc(4em + 15px); }

效果是这样的每次选完图片之后显示在页面上，我这里设置了最多可以选择四张，图片链接使用了临时的blob，接下来就要使用后端小伙伴给的接口，将自己本地的二进制文件传给他了。

在chooseImage选择好图片之后，写一个成功的回调函数，在回到函数里面添加一个图片上传的方法uploadFile，在方法里面添加url，等参数。

uniapp怎么上传二进制图片

success: (res) => { const tempFilePaths = res.tempFilePaths; const uploadTask = uni.uploadFile({ url: 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action', filePath: tempFilePaths[0], name: 'file', success: function(uploadFileRes) { console.log(uploadFileRes); _this.imgList = [..._this.imgList, uploadFileRes.data] } }); }

若是请求成功则返回一个图片链接

添加接口之后的，demo如下：

图片上传 {{imgList.length}}/4 export default { data() { return { imgList: [], // modalName: null, }; }, methods: { ChooseImage() { const _this = this uni.chooseImage({ count: 4, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'], //从相册选择 success: (res) => { const tempFilePaths = res.tempFilePaths; const uploadTask = uni.uploadFile({ url : 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action', filePath: tempFilePaths[0], name: 'file', success: function (uploadFileRes) { console.log(uploadFileRes); _this.imgList = [..._this.imgList, uploadFileRes.data] } }); } }); }, ViewImage(e) { uni.previewImage({ urls: this.imgList, current: e.currentTarget.dataset.url }); }, //删除 DelImg(e) { uni.showModal({ title: '删除', content: '确定要删除这张图片？', cancelText: '取消', confirmText: '删除', success: res => { if (res.confirm) { this.imgList.splice(e.currentTarget.dataset.index, 1) } } }) }, } } @import "../../colorui/main.css"; @import "../../colorui/icon.css"; .cu-form-group .title { min-width: calc(4em + 15px); }

uniapp怎么上传二进制图片

上传图片效果

uniapp怎么上传二进制图片

关于“uniapp怎么上传二进制图片”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。