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> <template>
<div class="sc-upload"> <div class="sc-upload" v-loading="loading">
<div v-show="img!=''" class="sc-upload-file"> <div v-if="tempImg || img" class="sc-upload-file">
<div class="mask"> <div class="mask">
<span class="del" @click.stop="del"><i class="el-icon-delete"></i></span> <span class="del" @click.stop="del"><i class="el-icon-delete"></i></span>
</div> </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>
<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"> <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"> <div class="file-empty">
上传 <i class="el-icon-plus"></i>
<h4>{{title}}</h4>
</div> </div>
</el-upload> </el-upload>
</div> </div>
@ -20,12 +21,14 @@
<script> <script>
export default { export default {
props: { props: {
modelValue: { type: String, default: "" } modelValue: { type: String, default: "" },
title: { type: String, default: "上传" },
}, },
data() { data() {
return { return {
loading: false, loading: false,
img: "" img: "",
tempImg: ""
} }
}, },
watch:{ watch:{
@ -42,16 +45,25 @@
}, },
methods: { methods: {
before(file){ before(file){
this.img = URL.createObjectURL(file); this.tempImg = URL.createObjectURL(file);
this.loading = true; this.loading = true;
}, },
success(res){ success(res){
this.loading = false; this.loading = false;
this.tempImg = "";
if(res.code != 200){
this.$message.warning(res.message || "上传文件未知错误")
}else{
this.img = res.data.src; this.img = res.data.src;
}
}, },
error(err){ error(err){
console.log(err.message); this.$notify.error({
title: '上传文件错误',
message: err
})
this.loading = false; this.loading = false;
this.tempImg = "";
this.img = "" this.img = ""
}, },
del(){ del(){
@ -63,20 +75,24 @@
<style scoped> <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 {width: 120px;height: 120px;}
.sc-upload-file {position: relative;width: 100px;height: 100px;} .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 {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 {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 span i {font-size: 12px;}
.sc-upload-file .mask .del {background: #F56C6C;} .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 .file img {vertical-align: bottom;}
.sc-upload-file:hover .mask {display: inline-block;} .sc-upload-file:hover .mask {display: inline-block;}
.sc-upload-uploader {} .sc-upload-uploader {border: 1px dashed #d9d9d9;}
.sc-upload-uploader .file-empty {width: 100px;height: 100px;background: #f5f5f5;} .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> </style>

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

@ -3,7 +3,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="头像" prop="avatar"> <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-form-item>
</el-col> </el-col>
</el-row> </el-row>