yh-uploadimage.vue component
<template>
<view class="yh-uploadimage">
<u-row gutter="10">
<u-col v-if="!showUploadList" span="4" v-for="(item, index) in fileList">
<view class="pre-item" :key="index">
<image @tap="previewImage(index)" class="pre-item-image"
:src="FormatDFSUrl(item.url)" mode="aspectFill"></image>
<view class="del u-f-ac u-f-ajc" @click="removeFun(index)" v-if="!preview">
<u-icon name="minus" size="26" color="white"></u-icon>
</view>
</view>
</u-col>
<u-col span="4" v-if="fileList&&fileList.length<limitNumber&&!preview">
<u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action" :max-count="limitNumber"
@on-success="successFun">
<view slot="addBtn" class="slot-btn u-f-ac u-f-ajc" hover-class="slot-btn__hover"
hover-stay-time="150">
<view>
<u-icon name="camera-fill" size="60" color="#c0c4cc"></u-icon>
<view class="placeholder" v-html="placeholderText"> </view>
</view>
</view>
</u-upload>
</u-col>
</u-row>
<view class="wrap u-f-ac u-f-wrap">
</view>
<!-- <u-upload :max-size="upload_size" :limitType="limitType " :file-list="fileList" :action="action"
@on-success="successFun"></u-upload> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
BaseFastDFS,
media_file_upload_url
} from '@/common/api/auth.js'
export default {
name: "yh-uploadimage",
data() {
return {
limitNumber:2,
showUploadList: false,
placeholderText: "请上传",
action: "", //上传地址
limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif'],
upload_size: "10",
currentCode: "", //文件服务器Code
currentPath: "/upload", //文件存放目录
fileList: [],
}
},
props: {
value: {
type: String
}, //传入的图片集合,多个之间用逗号分隔
code: {
type: String
}, //文件服务器Code
uploadpath: {
type: String,
default: '/upload'
}, //文件存放目录
filetypes: {
type: Array
}, //文件类型,多个逗号分隔
limit: {
type: Number,
default: 2,
}, //上传文件数量限制
placeholder: {
type: String,
}, //单个文件大小限制,单位M
size: {
type: String,
default: "10"
}, //单个文件大小限制,单位M
disabled: {
type: Boolean,
default: false
}, //是否禁用
preview: {
type: Boolean,
default: false,
}, //是否预览(只读)
single: {
type: Boolean,
default: false
}, //是否单个图片,相当于limit=1,但是优先级大于limit
uploadcallback: {
type: Function
}, //上传完成的回调
fileRename: {
type: String,
}, //文件重命名
category: {
type: Number
}, //上传文件分类(0=系统普通文件,1=特定的目录,2=超越code的上传)
},
created() {
this.initFun();
},
onPullDownRefresh() {},
watch:{
value() {
this.uploadInit()
},
fileList(){
let res=""
if(this.fileList&&this.fileList.length){
this.fileList.map(el=>{
res+=el.url+","
})
res = res.substring(0, res.length - 1)
}
this.$emit("input", res);
},
},
methods: {
successFun(data, index, lists) {
this.fileList.push({
url: data.response.path
})
/* console.log(data)
console.log(index)
console.log(lists) */
}, //上传成功
uploadInit(){
if (this.value) {
let curFilePathList = this.value.split(",");
if (curFilePathList) {
let fileListArr=[];
for (let i = 0; i < curFilePathList.length; i++) {
let item = curFilePathList[i];
fileListArr.push({
url: item,
});
}
this.fileList = fileListArr;
}
} else {
this.fileList = [];
}
},
initFun() {
this.uploadInit();
if (this.limit) {
this.limitNumber = this.limit;
}
if (this.size) {
this.upload_size = this.size * 1024 * 1024;
}
if (this.placeholder) {
this.placeholderText = this.placeholder;
}
if (this.filetypes) {
this.limitType = this.filetypes;
}
if (this.code) {
this.currentCode = this.code;
} else {
this.$message({
message: "[图片上传]未传入系统Code",
type: "error"
});
return;
}
if (this.uploadpath) {
this.currentPath = this.uploadpath;
}
let $fileReName = '';
if (this.fileRename)
$fileReName = `&fileRename=${this.fileRename}`;
this.action =
`${media_file_upload_url}?code=${this.currentCode}&path=${this.currentPath}&category=${this.category}${$fileReName}`;
},
removeFun(index){
this.fileList.splice(index,1);
this.$refs.uUpload.remove(index)
},
previewImage(index) {
var imgArr = [];
this.fileList.map(el=>{
imgArr.push(this.FormatDFSUrl(el.url) );
})
//预览图片
uni.previewImage({
loop:true,
indicator:"default",
current:index,
urls: imgArr
});
},
}
}
</script>
<style lang="scss" scoped>
/deep/ .u-upload{
height: 180rpx;
overflow: hidden;
width: 100%;
margin-top: -12rpx;
}
/deep/ .u-upload>uni-view{
width: 100%;
height: 100%;
text-align: center;
}
.slot-btn {
height: 180rpx;
background: rgb(244, 245, 246);
.placeholder{
font-size: 24rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #CCCCCC;
}
}
.slot-btn__hover {
background-color: rgb(235, 236, 238);
}
.pre-box {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.pre-item {
height: 180rpx;
position: relative;
margin-bottom: 10rpx;
}
.pre-item-image {
width: 100%;
height: 100%;
}
.del{
position: absolute;
top: -8rpx;
left: z;
right: -10rpx;
z-index: 11;
background: red;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
text-align: center;
}
</style>
main.js global registration:
import yhUploadimage from '@/components/upload/yh-uploadimage.vue'
Vue.component("yh-uploadimage", yhUploadimage);
use:
<yh-uploadimage code="zsbm" placeholder="Please upload your voucher</br> (up to 4)" :limit="4" v-model="formData.pic"></yh-uploadimage>