单图片上传
html
<view class="f_c_img">
<image :src=imgs mode="" @click="addPic" class="tiao"></image>
<image src='../../../static/image/face_img.png' mode="" @click="addPic"></image>
<view class="fan">
<view class="huadong"></view>
<view class="on">
<view class="beijing"></view>
</view>
</view>
</view>
data
data() {
return {
imgs: ""
}
},
方法
addPic: function() {
let that = this
var _this = this
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera'], //从相册选择
success: function(res) {
let file = res.tempFilePaths
var images = ''
var img = ''
for (var i = 0; i < res.tempFilePaths.length; i++) {
uni.uploadFile({
url: 'http://suhua.suzhanxue.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
//这是上传图片的路径,需要问后台拿
filePath: file[i],
name: 'file',
formData: {
'user': 'test'
},
success: (res) => {
images = JSON.parse(res.data).url
_this.imgs = images
console.log(_this.imgs)
}
});
}
}
});
},
样式
.f_c_img {
margin-top: 100upx;
margin-left: 202upx;
position: relative;
width: 268upx;
height: 270upx;
}
.f_c_img image {
width: 100%;
height: 100%;
z-index: 11;
}
.huadong {
position: absolute;
width: 100%;
height: 4upx;
background: rgba(75, 113, 214, 0.6);
animation: dong 6s linear infinite alternate;
z-index: 13;
}
@keyframes dong {
from {
top: 100%;
}
to {
top: 0upx;
}
}
多图片上传
html
<view class="complain_content upload">
<view class="complaint_content_top">
<view class="complaint_content_top_left">
<text>上传图片</text>
</view>
<view class="complaint_content_top_right">
<text>{{imageList.length}}</text>/<text>4</text>
</view>
</view>
<view class="Photo">
<view class="uploads">
<!-- 图片上传 -->
<view class='upload-image-view'>
<!-- 标题已经省略 -->
<!-- <view class='title'>上传xxxx图片</view> -->
<block v-for="(image,index) in imageList" :key="index">
<view class='image-view'>
<image :src="image" :data-src="image" @tap="previewImage"></image>
<view class='del-btn' :data-index="index" @tap='deleteImage(index)'>
<view class='baicha'></view>
</view>
</view>
</block>
<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">
<image src="../../../static/image/camera.png" mode=""></image>//自己找一张图片
</view>
</view>
</view>
</view>
</view>
data
data() {
return {
imageList: [], //保存图片路径集合
imageLength: 4, //限制图片张数
}
}
方法
chooseImage: function() {
var _this = this
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera', 'album'] //拍照或相册
success: function (res) {
let file = res.tempFilePaths
var images = []
var img = ''
for(var i = 0; i<res.tempFilePaths.length; i++) {
uni.uploadFile({
url: 'http://suhua.suzhanxue.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
//后台给的路径
filePath: file[i],
name: 'file',
formData: {
'user': 'test'
},
success: (res) => {
_this.imageList.push(JSON.parse(res.data).url);
console.log(res.data)
}
});
}
}
});
},
//预览图片
previewImage: function(e) {
let current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList,
})
},
//删除图片
deleteImage: function(e) {
// let index = e.target.dataset.index;
console.log(e)
let that = this;
let images = that.imageList;
images.splice(e, 1);
that.imageList = images;
},
//这个是多张图片用逗号隔开的字符串(后台所需)
//在提交的时候在转化为字符串
that.submits.pictures=that.imageList.join(",")
css
.complain_content{
margin-top: 30upx;
width: 100%;
padding: 16upx 20upx;
box-sizing: border-box;
background: white;
font-size: 32upx;
border-radius: 18upx;
box-shadow: 1upx 1upx 10upx #F7F7F7;
}
.complaint_content_top{
width: 100%;
height: 82upx;
border-bottom: 2upx solid #F0F0F0;
line-height: 80upx;
}
.complaint_content_bottom{
margin-top: 19upx;
height: 268upx;
}
.complaint_content_bottom textarea{
width: 100%;
height: 268upx;
font-size: 28upx;
}
.upload .complaint_content_top{
display: flex;
justify-content: space-between;
}
.upload .complaint_content_top .complaint_content_top_right{
font-size: 26upx;
color: #999999;
}
.Photo{
width: 100%;
margin-top: 19upx;
}
.upload-image-view {
width: 100%;
margin: 20upx 0 20upx 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.upload-image-view .image-view {
height: 130upx;
width: 130upx;
position: relative;
margin: 15upx 15upx 15upx 0upx;
border-radius: 8upx;
}
.upload-image-view .image-view image {
height: 100%;
width: 100%;
border-radius: 8upx;
}
.upload-image-view .image-view .del-btn {
background-color: #f6737;
border-radius: 50%;
width: 25upx;
height: 25upx;
position: absolute;
top: -12upx;
right: -12upx;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.upload-image-view .image-view .del-btn .baicha {
display: inline-block;
width: 20upx;
height: 5upx;
background: #fff;
line-height: 0;
font-size: 0;
vertical-align: middle;
-webkit-transform: rotate(45deg);
}
.upload-image-view .image-view .del-btn .baicha:after {
content: '/';
display: block;
width: 20upx;
height: 5upx;
background: #fff;
-webkit-transform: rotate(-90deg);
}
.upload-image-view .image-view .del-btn {
background-color: #f67371;
border-radius: 50%;
width: 25upx;
height: 25upx;
position: absolute;
top: -12upx;
right: -12upx;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.upload-image-view .add-view {
height: 115upx;
width: 115upx;
margin: 15upx 15upx 15upx 0upx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.00);
border: 2upx dashed #e6e6e6;
border-radius: 12upx;
}
/* 相机 */
.add-view image{
width: 70upx;
height: 60upx;
}
多图片渲染
html不多写自己领会
<view class="Description_img" v-show="item.value!=''">
<image :src=items v-for="items in item.value" mode=""></image>
</view>
调用
//这个是我封装的调用接口的
request.httppost('api/word/order/getOrderList?b=' + _self.submits.b, _self.submits, 'JSON', function(res) {
if(res.data.code==200){
//下拉刷新需要如果不需要下拉请忽略下面ifelse
if(res.data.data.length>5){
_self.status = 'loading'
}else{
_self.status = 'noMore'
}
console.log(res.data.data)
_self.upLoadList = res.data.data
res.data.data.forEach(function(item) {
// console.log(item)
// console.log(Array.from(item.pictures.split(",")))
let datas = [];
datas.push(item)
// console.log(datas)
datas.forEach(function(items) {
items.value = items.pictures.split(",")
_self.repair.push(items)
})
// console.log(_self.repair)
})
uni.hideLoading()
}
})