我们发布啦
This commit is contained in:
张乐
261
app/components/easy-upload/easy-upload.vue
Normal file
261
app/components/easy-upload/easy-upload.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<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>
|
||||
<image v-if="types == 'image'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></image>
|
||||
<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 class="uploader-input-box" v-if="uploads.length < uploadCount">
|
||||
<view class="uploader-input" @tap="chooseUploads"></view>
|
||||
</view>
|
||||
</view>
|
||||
<button type="primary" v-if="types == 'image'" @tap="upload">上传</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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'
|
||||
},
|
||||
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: [],
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
dataList() {
|
||||
this.uploads = this.dataList
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
previewImage (e) {
|
||||
var current = e.target.dataset.src
|
||||
uni.previewImage({
|
||||
current: current,
|
||||
urls: this.dataList
|
||||
})
|
||||
},
|
||||
chooseUploads(){
|
||||
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){
|
||||
this.uploads.push(res.tempFiles[i].path)
|
||||
this.uploadImages.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) => {
|
||||
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){
|
||||
if(this.uploads[index].substring(0,4) !== 'http'){
|
||||
this.uploads.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 => {
|
||||
this.uploads.splice(index,1)
|
||||
},
|
||||
});
|
||||
},
|
||||
upload(){
|
||||
debugger
|
||||
if(!this.uploadUrl) {
|
||||
uni.showModal({
|
||||
content: '请填写上传接口'
|
||||
});
|
||||
return;
|
||||
};
|
||||
for (let i of this.uploadImages) {
|
||||
uni.uploadFile({
|
||||
url: this.uploadUrl, //仅为示例，非真实的接口地址
|
||||
filePath: i,
|
||||
name: 'file',
|
||||
//请求参数
|
||||
formData: {
|
||||
'user': 'test'
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
this.$emit('successImage',uploadFileRes)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.uplode-file {
|
||||
margin: 10upx;
|
||||
width: 210upx;
|
||||
height: 210upx;
|
||||
position: relative;
|
||||
}
|
||||
.uploade-img {
|
||||
display: block;
|
||||
width: 210upx;
|
||||
height: 210upx;
|
||||
}
|
||||
.clear-one{
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: 0;
|
||||
}
|
||||
.clear-one-icon{
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.uploader-input-box {
|
||||
position: relative;
|
||||
margin:10upx;
|
||||
width: 208upx;
|
||||
height: 208upx;
|
||||
border: 2upx solid #D9D9D9;
|
||||
}
|
||||
.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: #D9D9D9;
|
||||
}
|
||||
.uploader-input-box:before {
|
||||
width: 4upx;
|
||||
height: 79upx;
|
||||
}
|
||||
.uploader-input-box:after {
|
||||
width: 79upx;
|
||||
height: 4upx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
40
app/components/easy-upload/readme.md
Normal file
40
app/components/easy-upload/readme.md
Normal file
@@ -0,0 +1,40 @@
|
||||
### easy-upload 组件
|
||||
|
||||
使用方法
|
||||
```js
|
||||
<easy-upload
|
||||
:dataList="imageList" uploadUrl="http://localhost:3000/upload" :types="category"
|
||||
deleteUrl='http://localhost:3000/upload' :uploadCount="6"
|
||||
@successImage="successImage" @successVideo="successvideo"
|
||||
></easy-upload>
|
||||
|
||||
//先引入组件
|
||||
import easyUpload from '@/components/easy-upload/easy-upload.vue'
|
||||
//注册组件
|
||||
components:{
|
||||
easyUpload
|
||||
}
|
||||
|
||||
//使用 easycom 可以直接使用
|
||||
|
||||
```
|
||||
|
||||
| 参数 | 类型 | 是否必填 | 参数描述
|
||||
| ---- | ---- | ---- | ----
|
||||
| types | String | 否 | 上传类型 image/video
|
||||
| dataList | Array | 否 | 图片/视频数据展示
|
||||
| clearIcon | String | 否 | 删除图标(可以换成自己本地图片)
|
||||
| uploadUrl | String | 否 | 上传的接口
|
||||
| deleteUrl | String | 否 | 删除的接口
|
||||
| uploadCount | Number | 否 | 上传图片最大个数(默认为一张)
|
||||
| upload_max | Number | 否 | 上传大小(默认为3M)
|
||||
| upload_max | Number | 否 | 上传大小(默认为3M)
|
||||
| upload_max | Number | 否 | 上传大小(默认为3M)
|
||||
|
||||
| 事件 | 是否必填 | 参数描述
|
||||
| ---- | ---- | ----
|
||||
| successImage | 否 | 上传图片成功事件
|
||||
| successVideo | 否 | 上传视频成功回调
|
||||
|
||||
示例项目中有服务端代码 (node.js)
|
||||
|
||||
Reference in New Issue
Block a user