<template>
<view>
<view class="list-ul">
<view class="list-li" v-if="show" @click="onUpload()">
<view class="add-photo">
<!-- <image src="/static/collectClothes/add.png" mode=""></image> -->
<uni-icons type="camera" size="30"></uni-icons>
<text>可再加{{ 6 - PhotoModelList.length }}张</text>
</view>
</view>
<view class="list-li" v-for="(item, index) in PhotoModelList" :key="index">
<view class="delete" v-if="show" @click="deleteImg(index)">
<uni-icons type="close" size="20"></uni-icons>
</view>
<image :src="item.Src" mode="" @click="lookImg(item)"></image>
</view>
</view>
</view>
</template>
<script>
import http from "@/utils/http.js";
import Json from "@/Json.js";
export default {
props: {
PhotoModelList: {
type: Array,
default: () => [],
},
show: {
type: Boolean,
default: true,
},
},
data() {
return {};
},
methods: {
// 查看图片
lookImg(item) {
console.log(item);
// uni.previewImage({
// current: item,
// urls: this.PhotoModelList,
// });
uni.previewImage({
urls: this.PhotoModelList.map((item) => item.Src),
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
indicator: "default",
success: function(data) {
console.log(
"选中了第" +
(data.tapIndex + 1) +
"个按钮,第" +
(data.index + 1) +
"张图片"
);
},
fail: function(err) {
console.log(err.errMsg);
},
},
});
},
// 删除图片
deleteImg(index) {
let _PhotoModelList = this.PhotoModelList.filter((v, i) => {
return i != index;
});
this.$emit("photo_change", _PhotoModelList);
},
// 上传图片
onUpload() {
if (this.PhotoModelList.length >= 6) {
uni.showToast({
title: "最多可添加六张图片",
icon: "none",
});
} else {
uni.chooseImage({
count: 1, // 默认9
sizeType: ["compressed", "original"],
sourceType: ["album", "camera"],
success: async (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.showLoading({
title: "加载中",
mask: true,
});
let res = await http.get(
`${Json.serve}/qiniu/token`
);
console.log(res);
if (res.errno == 0) {
console.log(res);
let token = res.data.token; //token为七牛云的token一般由后台接口提供
let cdn_url = res.data.cdn_url; //七牛云的域名
let key = "userinfo/lxwsh" + new Date().getTime() + Math.random() +
".png"; //key为自定义文件名
let filePath = tempFilePaths[0]; //要上传的图片的路径
// 上传到七牛云
uni.uploadFile({
url: "https://up-z1.qiniup.com",
filePath: tempFilePaths[0], //要上传的图片的路径
name: "file",
formData: {
key: key, //上传成功以后,即为图片的名字
token: token, //后台获取回来的token
},
success: (uploadFileRes) => {
let _uploadFileRes = JSON.parse(uploadFileRes.data);
if (_uploadFileRes) {
let url = cdn_url + "/" + _uploadFileRes
.key; //将七牛云域名与key连接起来就是图片的路径
let imgData = {
Id: key,
Name: _uploadFileRes.key,
Src: url,
};
this.PhotoModelList.push(imgData);
console.log("图片", this.PhotoModelList);
this.$emit("photo_change", this.PhotoModelList);
}
},
fail: (err) => {
console.log("fail", err);
},
});
} else {
uni.hideLoading();
uni.showToast({
title: res.message,
icon: "none",
});
}
},
});
}
},
},
created() {
this.baseUrl = uni.getStorageSync("baseUrl");
// console.log("图片组件",this.PhotoModelList);
},
};
</script>
<style scoped lang="scss">
.list-ul {
width: 100%;
height: auto;
// display: flex;
// justify-content: space-between;
flex-wrap: wrap;
// padding: 30rpx;
box-sizing: border-box;
overflow: hidden;
.add-photo {
width: 110rpx;
height: 110rpx;
margin: auto;
border-radius: 10rpx;
// box-shadow: 0px 0px 10px rgba(0,0,0,.1);
background: #f6f7f9;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
image {
display: block;
width: 40rpx !important;
height: 40rpx !important;
}
text {
font-size: 19rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
}
.list-li:nth-child(4n) {
margin-right: 0rpx;
}
.list-li {
width: 110rpx;
// width: 158rpx;
// margin-top: 34rpx;
margin-bottom: 15rpx;
margin-right: 13rpx;
float: left;
position: relative;
border-radius: 12rpx;
.delete {
width: 40rpx;
height: 40rpx;
color: #fff;
text-align: center;
line-height: 40rpx;
position: absolute;
top: 0rpx;
right: 0rpx;
}
image {
width: 110rpx;
height: 110rpx;
border-radius: 12rpx;
}
}
}
</style>
uniapp中图片上传七牛云
最新推荐文章于 2024-06-15 20:21:23 发布