zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片上传增加插糟&宽高参数

This commit is contained in:
sakuya 2021-05-21 22:31:55 +08:00
parent 5c54c698a1
commit 1ed45a233e
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/scUpload/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="sc-upload" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
<div class="sc-upload" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" :style="style">
<div v-if="tempImg || img" class="sc-upload-file">
<div class="mask">
<span class="del" @click.stop="del"><i class="el-icon-delete"></i></span>
@ -9,10 +9,12 @@
</div>
<div v-else class="sc-upload-uploader">
<el-upload ref="upload" class="uploader" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error">
<div class="file-empty">
<i :class="icon"></i>
<h4>{{title}}</h4>
</div>
<slot>
<div class="file-empty">
<i :class="icon"></i>
<h4>{{title}}</h4>
</div>
</slot>
</el-upload>
</div>
<el-input v-model="img" style="display:none"></el-input>
@ -22,19 +24,26 @@
<script>
export default {
props: {
height: {type: Number, default: 120},
width: {type: Number, default: 120},
modelValue: { type: String, default: "" },
action: { type: String, default: "#" },
accept: { type: String, default: ".jpg, .png, .jpeg, .gif" },
maxSize: { type: Number, default: 10 },
title: { type: String, default: "上传" },
icon: { type: String, default: "el-icon-plus" }
icon: { type: String, default: "el-icon-plus" },
onSuccess: { type: Function, default: () => { return true } }
},
data() {
return {
loading: false,
fileIsImg: true,
img: "",
tempImg: ""
tempImg: "",
style: {
width: this.width + "px",
height: this.height + "px"
}
}
},
watch:{
@ -73,12 +82,15 @@
success(res){
this.loading = false;
this.tempImg = "";
var os = this.onSuccess(res);
if(os!=undefined && os==false){
return false;
}
if(res.code != 200){
this.$message.warning(res.message || "上传文件未知错误")
}else{
this.img = res.data.src;
}
this.$emit('on-success', res)
},
error(err){
this.$notify.error({

20
src/views/vab/upload.vue
View File

@ -3,8 +3,13 @@
<el-card shadow="never" header="基础示例">
<sc-upload v-model="imgurl" :action="uploadUrl"></sc-upload>
<sc-upload v-model="avatar" :action="uploadUrl"></sc-upload>
<sc-upload v-model="avatar" title="上传头像" icon="el-icon-picture-outline" :action="uploadUrl"></sc-upload>
<sc-upload v-model="avatar" title="自定义" icon="el-icon-picture-outline" :action="uploadUrl"></sc-upload>
<sc-upload v-model="avatar" title="自定义" icon="el-icon-picture-outline" :action="uploadUrl" accept=".xls,.xlsx" :on-success="success" :width="220">
<div class="custom-empty">
<i class="el-icon-upload"></i>
<p>自定义插槽</p>
</div>
</sc-upload>
</el-card>
<el-card shadow="never" header="在验证表单中使用">
@ -74,6 +79,14 @@
}
},
methods: {
success(response){
this.$alert(`success函数钩子，return false后阻止后续执行，回调参数打开控制台查看`, {
title: "提示",
type: "success"
})
console.log(response);
return false;
},
submitForm(){
this.$refs.ruleForm.validate((valid) => {
if (valid) {
@ -96,4 +109,7 @@
.imglist {margin-bottom:0;}
.imglist .el-col+.el-col {margin-left: 10px;}
.custom-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.custom-empty i {font-size: 40px;color: #8c939d;}
.custom-empty p {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
</style>