uniapp-图片上传组件
uniapp-vue-图片上传组件
·
效果图
easy-upload.vue
<template>
<view>
<view class="upload">
<block v-for="(upload,index) in uploads" :key="index">
<view class="uplode-file">
<image v-if="types == 'image'" class="uploade-img" :src="upload" :data-src="upload" @tap="previewImage"></image>
<view v-if="types == 'image'" class="clear-one-icon" @tap="delImage(index)"><span class="icon iconfont"></span> </view>
<video v-if="types == 'video'" class="uploade-img" :src="upload" controls>
<cover-image v-if="types == 'video'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></cover-image>
</video>
</view>
</block>
<view v-if="uploads.length < uploadCount" :class="uploadIcon ? 'uploader-icon' : 'uploader-input-box'">
<view v-if="!uploadIcon" class="uploader-input" @tap="chooseUploads"></view>
<image v-else class="image-cion" :src="uploadIcon" @tap="chooseUploads"></image>
</view>
</view>
<!-- <button type="primary" v-if="types == 'image'" @tap="upload">上传</button> -->
</view>
</template>
<script>
import api from "@/api/http.js";
export default{
props: {
types: {
type: String,
default: 'image'
},
dataList: {
type: Array,
default: function() {
return []
}
},
clearIcon: {
type: String,
default: 'http://img1.imgtn.bdimg.com/it/u=451604666,2295832001&fm=26&gp=0.jpg'
},
uploadIcon: {
type: String,
default: ''
},
uploadUrl: {
type: String,
default: ''
},
deleteUrl: {
type: String,
default: ''
},
uploadCount: {
type: Number,
default: 1
},
//上传图片大小 默认3M
upload_max: {
type: Number,
default: 3
}
},
data(){
return {
//上传的图片地址
uploadImages: [],
//展示的图片地址
uploads: [],
// 超出限制数组
exceeded_list: [],
imgs: []
}
},
watch:{
dataList:{
handler(val){
this.uploads = val;
},
immediate: true
}
},
methods:{
previewImage (e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.dataList
})
},
chooseUploads(){
var that = this;
console.log(this.types)
switch (this.types){
case 'image':
uni.chooseImage({
count: this.uploadCount - this.uploads.length, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: (res) => {
for(let i = 0; i< res.tempFiles.length; i++){
if(Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024){
// let access_token = uni.getStorageSync("token");
// let url = 'https://api.weixin.qq.com/wxa/img_sec_check?access_token=' + access_token;
// wx.request({
// url: url,
// method: 'POST',
// header : {
// 'Content-Type': 'application/octet-stream'
// },
// data: {
// media: res.tempFiles[i].path
// },
// success: function (res) {
// console.log(res);
// // {"errcode":0,"errmsg":"ok"}
// }
// })
this.$api.home.uploadImg(res.tempFiles[i].path)
.then(uploadFileRes=>{
let data = JSON.parse(uploadFileRes).data
this.imgs.push(data)
this.$parent.imgUrls.push(data)
})
this.uploads.push(res.tempFiles[i].path)
}else {
this.exceeded_list.push(i === 0 ? 1 : i + 1);
uni.showModal({
title: '提示',
content: `第${[...new Set(this.exceeded_list)].join(',')}张图片超出限制${this.upload_max}MB,已过滤`
});
}
}
},
fail: (err) => {
console.log('err',err)
if (err.errMsg === "chooseImage:fail cancel") {
return
} else {
uni.showModal({
content: JSON.stringify(err)
});
}
}
});
break;
case 'video' :
uni.chooseVideo({
sourceType: ['camera', 'album'],
success: (res) => {
if(Math.ceil(res.size / 1024) < this.upload_max * 1024){
this.uploads.push(res.tempFilePath)
uni.uploadFile({
url: this.uploadUrl, //仅为示例,非真实的接口地址
filePath: res.tempFilePath,
name: 'file',
//请求参数
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
this.$emit('successVideo',uploadFileRes)
}
});
}else {
uni.showModal({
title: '提示',
content: `第${[...new Set(this.exceeded_list)].join(',')}张视频超出限制${this.upload_max}MB,已过滤`
});
}
},
fail: (err) => {
uni.showModal({
content: JSON.stringify(err)
});
}
});
break;
}
},
delImage(index){
//第一个是判断app或者h5的 第二个是判断小程序的
if(this.uploads[index].substring(0,4) !== 'http' || this.uploads[index].substring(0,11) == 'http://tmp/'){
this.uploads.splice(index,1)
this.$parent.imgUrls.splice(index,1)
return;
};
if(!this.deleteUrl) {
uni.showModal({
content: '请填写删除接口'
});
return;
};
uni.request({
url: this.deleteUrl,
method: 'DELETE',
data: {
image: this.dataList[index]
},
success: res => {
if(res.data.status == 1) {
uni.showToast({
title: '删除成功'
})
this.uploads.splice(index,1)
}
},
});
},
upload(){
console.log('this----',this.uploads)
for (let i of this.uploads) {
uni.uploadFile({
url: api.uploadImg(),
filePath: i,
name: 'file',
//请求参数
// formData:null
success: (uploadFileRes) => {
// this.$emit('successImage',uploadFileRes)
let data = JSON.parse(uploadFileRes.data).data
this.imgs.push(data)
console.log('this.imgs',this.imgs)
this.$parent.successImage(this.imgs)
}
});
}
}
}
}
</script>
<style scoped>
.upload {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0 40rpx;
}
.uplode-file {
margin: 12upx;
width: 194upx;
height: 194upx;
position: relative;
}
.uploade-img {
display: block;
width: 194upx;
height: 194upx;
}
.clear-one{
position: absolute;
top: -10rpx;
right: 0;
}
.clear-one-icon{
position: absolute;
top: 10rpx;
right: 10rpx;
z-index: 9;
font-size: 12rpx;
width: 30rpx;
height: 30rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.clear-one-icon>.icon{
transform: scale(0.7);
}
.uploader-input-box {
position: relative;
margin:10upx;
width: 194upx;
height: 194upx;
background-color: #f4f4f4;
}
.uploader-input-box:before,
.uploader-input-box:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #999;
}
.uploader-input-box:before {
width: 6upx;
height: 59upx;
}
.uploader-input-box:after {
width: 59upx;
height: 6upx;
}
.uploader-input-box:active {
border-color: #999999;
}
.uploader-input-box:active:before,
.uploader-input-box:active:after {
background-color: #999999;
}
.uploader-input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.uploader-icon{
position: relative;
margin:10upx;
width: 208upx;
height: 208upx;
}
.uploader-icon .image-cion{
width: 100%;
height: 100%;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)