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

UP

This commit is contained in:
sc 2021-05-15 17:23:54 +08:00
parent 4004b81827
commit 2a4cf90586
2 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,16 @@
<template>
<div class="sc-upload">
<div v-show="img!=''" class="sc-upload-file">
<div class="sc-upload" v-loading="loading">
<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>
</div>
<el-image class="file" :src="img" :preview-src-list="[img]" hide-on-click-modal append-to-body></el-image>
<el-image class="file" :src="tempImg || img" :preview-src-list="[img]" hide-on-click-modal append-to-body></el-image>
</div>
<div v-show="img==''" class="sc-upload-uploader">
<div v-else class="sc-upload-uploader">
<el-upload ref="upload" v-loading="loading" class="uploader" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" action="https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api/upload" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error">
<div class="file-empty">
上传
<i class="el-icon-plus"></i>
<h4>{{title}}</h4>
</div>
</el-upload>
</div>
@ -20,12 +21,14 @@
<script>
export default {
props: {
modelValue: { type: String, default: "" }
modelValue: { type: String, default: "" },
title: { type: String, default: "上传" },
},
data() {
return {
loading: false,
img: ""
img: "",
tempImg: ""
}
},
watch:{
@ -42,16 +45,25 @@
},
methods: {
before(file){
this.img = URL.createObjectURL(file);
this.tempImg = URL.createObjectURL(file);
this.loading = true;
},
success(res){
this.loading = false;
this.tempImg = "";
if(res.code != 200){
this.$message.warning(res.message || "上传文件未知错误")
}else{
this.img = res.data.src;
}
},
error(err){
console.log(err.message);
this.$notify.error({
title: '上传文件错误',
message: err
})
this.loading = false;
this.tempImg = "";
this.img = ""
},
del(){
@ -63,20 +75,24 @@
<style scoped>
.el-form-item.is-error .sc-upload {border: 1px solid #F56C6C;}
.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}
.sc-upload {width: 100px;height: 100px;}
.sc-upload-file {position: relative;width: 100px;height: 100px;}
.sc-upload {width: 120px;height: 120px;}
.sc-upload:hover {}
.sc-upload-file {position: relative;width: 100%;height: 100%;}
.sc-upload-file .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
.sc-upload-file .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
.sc-upload-file .mask span i {font-size: 12px;}
.sc-upload-file .mask .del {background: #F56C6C;}
.sc-upload-file .file {width: 100px;height: 100px;}
.sc-upload-file .file {width: 120px;height: 120px;}
.sc-upload-file .file img {vertical-align: bottom;}
.sc-upload-file:hover .mask {display: inline-block;}
.sc-upload-uploader {}
.sc-upload-uploader .file-empty {width: 100px;height: 100px;background: #f5f5f5;}
.sc-upload-uploader {border: 1px dashed #d9d9d9;}
.sc-upload-uploader:hover {border: 1px dashed #409eff;}
.sc-upload-uploader .file-empty {width: 118px;height: 118px;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
</style>

2
src/views/setting/user/save.vue
View File

@ -3,7 +3,7 @@
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="头像" prop="avatar">
<sc-upload v-model="form.avatar"></sc-upload>
<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
</el-form-item>
</el-col>
</el-row>