uni-app 多图上传(后端PHP)

算盘记账APP小程序


uni-app实现多图上传案例

<template>

<view>

<view class="top_nav">

<view class="nav_left">

<uni-icon type="arrowleft" class="nav_left_icon" size="30"></uni-icon>

</view>

<view class="nav_mid">

<text>图片</text>

</view>

<view class="nav_right" @tap="upload()">

<view class="icon iconfont icon-xiangji"></view>

</view>

</view>

<view class="homework-ctn">

<uni-grid :column="3" :hor="35" :ver="-45">

<uni-grid-item marker="badge" v-for="(item,index) in imgList" :key="index" @longpress="extra(index)">

<image :src="item" mode="" style="width:200rpx;height:200rpx;"></image>

</uni-grid-item>

</uni-grid>

</view>

<uniPopup ref="popup" type="bottom">

<view class="pop_ty">设为主图</view>

<view class="pop_ty">设置图片标签</view>

<view class="pop_ty" style="color: red;border-bottom: none;" @tap="deleteNow()">删除</view>

</uniPopup>

<view class="upload_final" @tap="final_upload()">上传</view>

</view>

</template>

<script>

//此处为从uni-ui引入的一些组件

import {

uniCard,

uniIcon,

uniPagination,

uniPopup,

uniGrid,

uniGridItem

} from '@dcloudio/uni-ui'

export default {

components: {

uniCard,

uniPagination,

uniPopup,

uniIcon,

uniGrid,

uniGridItem

},

data() {

return {

finalButton: false,

imgList: [],

imgIndex:0

}

},

methods: {

extra(index) {

//长按某张图片调起底部弹出层。进行操作

this.$refs.popup.open()

this.imgIndex = index

},

deleteNow(){

this.imgList.splice(this.imgIndex-1,1);

this.$refs.popup.close();

},

upload: function() {

let _self = this;

uni.chooseImage({

count:9-this.imgList.length,

sizeType:'compressed', //指定压缩图

sourceType: ['album', 'camera'], //从相册选择或者拍摄

success: function(res) {

// 预览图片

_self.imgList = _self.imgList.concat(res.tempFilePaths);

console.log(res.tempFilePaths);


},

error: function(e) {

console.log(e);

}

});

},

final_upload: function() {

uni.showLoading({

title: '图片上传中,请稍后',

mask:true

});

let imgs = this.imgList.map((value,index)=>{


return {

name:'images'+index,

uri:value

}

});


let _self = this;

//将imgList重新映射

uni.uploadFile({

url: '后端文件地址',

files:imgs,

success: function(res) {

if(res.statusCode == 200){

uni.showToast({

title: '图片上传完成',

duration: 1500

});

_self.imgList = [];

uni.hideLoading()

}

}

});

}

}

}

</script>

<style scoped>

.content {

text-align: center;

height: 400upx;

margin-top: 200upx;

}

.pop_ty {

display: flex;

justify-content: center;

height: 50px;

align-items: center;

padding-top: 15upx;

font-size: 15px;

color: #007AFF;

border-bottom-color: #C0C0C0;

border-bottom-width: 2upx;

border-bottom-style: solid;

}

.top_nav {

display: flex;

flex-direction: row;

margin-top: 30px;

justify-content: space-between;

align-items: center;

border-bottom-color: #EEEEEE;

color: #007AFF;

font-size: 20upx;

border-bottom-style: solid;

padding-bottom: 2upx;

border-bottom-width: 2upx;

margin-bottom: 5upx;

}

.nav_left {

padding-left: 5upx;

}

.nav_mid {

font-size: 40upx;

color: #c0c0c0;

}

.nav_right {

padding-right: 20upx;

}

.nav_right>.icon-xiangji {

font-size: 50upx;

color: #333333;

}

</style>


效果图:


后端(PHP)

if(!empty($_FILES)){

//获取扩展名

// $exename = getExeName($_FILES['images1']);

$file = json_decode($_FILES);



for ($i=0; $i < count($_FILES) ; $i++) {

$fileName[] = 'images'.$i;

}

$final = array();

foreach ($fileName as $k => $v) {

$exename = $_FILES[$v]['type'];

if($exename != 'image/png' && $exename != 'image/jpg' && $exename != 'image/gif' && $exename !='image/jpeg') {

exit('不允许的扩展名');

}

//此处地址根据项目而定,唯一注意的就是图片命名,这里难得去获取后缀,随便写了个png

$imageSavePath =WEB_CORE_LIB.'images'.'/'.uniqid().rand(1,100).'.png';


if(move_uploaded_file($_FILES[$v]['tmp_name'],$imageSavePath)){

$final[] = $v;

}

}

echo json_encode($final);

}else{

echo 2;

}


本项目为后端进行图片批量处理,当然也可以在前端循环调用uni.uploadFile。其余待补充


csdn.

版权声明:uni-app 多图上传(后端PHP)内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系 删除。本文链接:https://www.qi520.com/n/16579.html