uniapp上传二进制图片的实现
更新时间：2022年06月30日 11:16:31 作者：祈澈菇凉
本文主要介绍了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";
这样一来，就不需要写什么样式了，直接使用写好的就行了。
<template>
<view>
<form>
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
</form>
</view>
</template>
<script>
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)
}
}
})
},
}
}
</script>
<style>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.cu-form-group .title {
min-width: calc(4em + 15px);
}
</style>效果是这样的
每次选完图片之后显示在页面上，我这里设置了最多可以选择四张，图片链接使用了临时的blob，接下来就要使用后端小伙伴给的接口，将自己本地的二进制文件传给他了。
在chooseImage选择好图片之后，写一个成功的回调函数，在回到函数里面添加一个图片上传的方法uploadFile，在方法里面添加url，等参数。
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如下：
<template>
<view>
<form>
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
<image v-if="item" :src="item" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
</form>
</view>
</template>
<script>
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)
}
}
})
},
}
}
</script>
<style>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.cu-form-group .title {
min-width: calc(4em + 15px);
}
</style>
上传图片效果
到此这篇关于uniapp上传二进制图片的实现的文章就介绍到这了,更多相关uniapp上传二进制图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js判断上传文件类型判断FileUpload文件类型代码,需要的朋友可以参考下2014-05-05
将阿拉伯数字转化中国大写数字的函数代码，需要的朋友可以参考下。2010-04-04
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。2010-10-10
如果你看到别人写trim函数是用循环而不用正则表达式来写，请不要取笑，也许，他们就是高手。如果你很自信你的trim函数效率很高，请看完本文再下结论。2008-12-12
这篇文章主要介绍了javascript实现加载xml文件的方法,涉及JavaScript针对xml文件对象的相关加载与获取操作实现方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了js module，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了微信小程序组件传值图示过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
数组解构是一种在 JavaScript 中从数组中提取值并将它们分配给变量的方式,在数组解构中分为完全解构,不完全解构,解构失败以及解构默认值,这篇文章主要介绍了js中数组解构与对象解构,需要的朋友可以参考下2023-09-09
本篇文章是对使用JS清空File控件的路径值的方法进行了详细的分析介绍，需要的朋友参考下2013-07-07
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
这篇文章主要为大家分享了基于Bootstrap Ace模板实现菜单和Tab页效果，感兴趣的小伙伴们可以参考一下2015-12-12
最新评论