- <div class="upload-img-box">
- <div class="box" v-for="(item,index) in totalImg" :key='index'>
- <img class="pre-img" :src="item" @click="previewImage(index)" alt=""/>
- <img class='delete' src='https://static-c.ehsy.com/m/images/delete.png' @click='deleteImg(index)'>
- </div>
- <div class="box" id='fileUploadBtn' @click="chooseImgs()" v-show="totalImg.length < 9">
- <img class='upload_img' src="https://static-c.ehsy.com/m/images/addImage.png" alt="">
- </div>
- </div>
data
totalImg是指压缩后的图片,sourceImg是指未压缩的图片
- data() {
- totalImg:[],
- sourceImg:[]
- }
js
选择多张图片
- chooseImgs:function(){
- var _this = this
- uni.chooseImage({
- count:9,
- sizeType:['original', 'compressed'],
- sourceType: ['album'], //从相册选择
- success:(res) => {
- // console.log(res.tempFilePaths)
- for(let i=0;i<res.tempFilePaths.length;i++){
- const tempFilePaths = res.tempFilePaths[i]
- let base64
- uni.getImageInfo({
- src:tempFilePaths,
- success:function(res) {
- // console.log('压缩前', res)
- _this.sourceImg.push(res.path)
- let canvasWidth = res.width //图片原始长宽
- let canvasHeight = res.height
- let base = canvasWidth / canvasHeight
- if (canvasWidth > 5000) {
- canvasWidth = 5000;
- canvasHeight = Math.floor(canvasWidth / base)
- }
- let img = new Image()
- img.src = res.path
- let canvas = document.createElement('canvas');
- let ctx = canvas.getContext('2d')
- canvas.width = 70
- canvas.height = 70
- ctx.drawImage(img, 0, 0, 70, 70)
- canvas.toBlob(function(fileSrc) {
- let imgSrc = window.URL.createObjectURL(fileSrc)
- _this.totalImg.push(imgSrc)
- })
- }
- })
- }
- console.log(_this.sourceImg)
- console.log(_this.totalImg)
- }
- })
- }
(1)uni.getImageInfo() 的src是string类型,指向图片的路径,一次只能处理一张图片,所以在多图情况下需要进行遍历处理。uni.getImageInfo() 参数描述如下:
详细返回参数及用法请移步uniapp官网相关文档:(https://uniapp.dcloud.io/api/media/image?id=getimageinfo)
(2)压缩图片是将图片画在canvas上面,使用canvas来进行压缩
预览图片
uniapp提供的预览图片接口:uni.previewImage() 中的属性loop、indicator、longPressAction是APP下才生效,H5及小程序不生效。
- previewImage:function(index){
- var _this = this
- let imgSrc = _this.sourceImg
- uni.previewImage({
- current:_this.sourceImg[index],
- urls:imgSrc,
- // #ifdef APP-PLUS
- loop:true,
- indicator:'number',
- longPressActions:{
- itemList: ['发送给朋友', '保存图片', '收藏'],
- success: function(data) {
- console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
- },
- fail: function(err) {
- console.log(err.errMsg);
- }
- },
- // #endif
- success:function(res){
- }
- })
- }
删除图片
deleteImg:function(index){
var _this = this
_this.totalImg.splice(index,1)
_this.sourceImg.splice(index,1)
}
此处特别提示,splices()会影响到原数组,如果不想影响到原数组请用silce(),splice可以用来对数组进行删除、添加和替换的操作。
1. 删除 splice(index,count)
index是指删除开始的地方,count是指要删除的个数
2.添加 splice(index,0,newVal)
index 是想替换的元素的位置,newVal是想要插入的项
3.替换 splice(index,count,newVal)
index 是替换开始的位置,count 是想要替换的数量,newVal是想要替换的项
返回的是被替换的数组元素,具体如下:
css
- .upload-img-box{
- width: 100%;
- overflow: hidden;
- .box{
- width: 25%;
- height: 0;
- padding-bottom: 25%; //
- float: left;
- margin-top: 30px;
- text-align: center;
- position: relative;
- .pre-img{
- left: 50%;
- top: 0;
- transform: translateX(-50%);
- position: absolute;
- }
- .delete{
- z-index: 5;
- width: 28%;
- position: absolute;
- top: -12%;
- left: 72%;
- }
- }
- }
设置height=0、padding-bottom = 25% 是为了得到一个等宽高的div来放我们选定的图片,height索然设置为0,但是padding-bottom是相对于父元素的宽度而言的,会撑开高度,设置padding-bottom的值与宽度一致,就会生成一个宽高1比1的容器。
上传图片
调用uni.uploadFile()即可,参数说明如下:(https://uniapp.dcloud.io/api/request/network-file?id=uploadfile)
小程序需要配置业务域名白名单,H5需要解决跨域问题。