图片上传功能，前端，后台，完整版代码

1、APP端：uview 

<u-upload ref="uUpload" name="image" max-count="3"
:action="action" :file-list="filesArr"
:header="header" class="bg-1">
</u-upload>

上传文件传递参数：

//获取上传的图片
let files = [];
files = this.$refs.uUpload.lists.filter(val => {
return val.progress == 100;
})
for (var i = 0; i < files.length; i++) {
this.parkData.tour_images.push(files[i].response.data[0].path);
}

 

2、APP端，展示预览图以及点击放大的效果。

<view class="flex h-50 line-50" v-if="logsinfo.tour_images != null">
<text class="font-30 text-color2">附件：</text>
</view>
<image @tap="previewImage(item,logsinfo.tour_images)"
v-for="(item,index) in logsinfo.tour_images" :src="item" :key="index"
mode="aspectFill" class="w-140 h-140 mr-10"></image>

放大的函数：

//图片预览
previewImage(url, urls) {
uni.previewImage({
urls: urls,
current: url
})
},

 

3、PC端：elementui

<div style="padding-top: 10px;" v-if="infoData.tour_images != null">
<div class="block demo-image__preview">
<span style="float: left">附件说明：</span>
<span v-for="(item,index) in infoData.tour_images" :key="index">
<el-image class="el-img" :src="item" :preview-src-list="[item]" fit="scale-down"></el-image>
</span>
</div>
</div>

不需要额外的函数辅助。

 

4、后端代码：PHP

接收参数：'tour_images', []  或者：input（'tour_images/a'）；

转JSON存： $post['tour_images'] = json_encode($post['tour_images']);

转JSON输出： $item['tour_images'] = json_decode($item['tour_images']);

 

5、数据库：MYSQL

ALTER TABLE `oct_office_patrol_task_tour` ADD `tour_images` TEXT NOT NULL COMMENT '附件JSON' AFTER `tour_write_time`;
ALTER TABLE `oct_office_patrol_task_tour` CHANGE `tour_images` `tour_images` TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT '附件JSON';