<template>
|
<div>
|
<div v-if="file_type == 'images'" class="image-list" style="width:100%">
|
<draggable v-model="imageList" v-bind="{group:'item'}" @change="changeSort">
|
<div v-for="(item, index) in imageList" :key="index" class="image-wrap">
|
<div class="imgStyle">
|
<img :src="item.url" /><br/>
|
<el-input size="mini" v-if="showtitle" style="width:102px; position:relative; bottom:0px;" v-model="item.name" placeholder="图片名称"></el-input>
|
</div>
|
<div class="icon-wrap">
|
<i class="el-icon-delete" @click.stop="handleRemove('images',index,item.url)"></i>
|
<i style="cursor:pointer" :class="showtitle ? 'el-icon-top' : 'el-icon-bottom'" @click.stop="handlePictureCardPreview(index)"></i>
|
</div>
|
</div>
|
<el-upload action="#" ref="upload" class="image-uploader" :before-upload="beforeUpload" :http-request="upload" multiple>
|
<i :class="loading ? 'el-icon-loading' : 'el-icon-plus'"></i>
|
</el-upload>
|
</draggable>
|
</div>
|
<div v-else-if="file_type == 'image'" class="image-list" style="width:100%">
|
<el-row v-if="upload_type == '1'">
|
<div class="image-wrap" v-if="siglepic">
|
<div class="imgStyle">
|
<img :src="siglepic" />
|
</div>
|
<div class="icon-wrap">
|
<i class="el-icon-delete" @click.stop="handleRemove('image','')"></i>
|
</div>
|
</div>
|
<el-upload action="#" ref="upload" class="image-uploader" :before-upload="beforeUpload" :http-request="upload">
|
<i :class="loading ? 'el-icon-loading' : 'el-icon-plus'"></i>
|
</el-upload>
|
</el-row>
|
<el-row v-else>
|
<el-col :span="16">
|
<el-popover v-if="siglepic" placement="top" width="210" trigger="hover">
|
<img v-if="siglepic" style="max-width:200px; max-height:200px" :src="siglepic">
|
<el-input slot="reference" v-model="siglepic" autoComplete="off" clearable placeholder="请上传图片"></el-input>
|
</el-popover>
|
<el-input v-else v-model="siglepic" autoComplete="off" clearable placeholder="请上传图片"></el-input>
|
</el-col>
|
<el-col :span="8">
|
<el-upload class="upload-demo" ref="upload" action="#" :before-upload="beforeUpload" :http-request="upload">
|
<el-button class="el-icon-upload" size="small" type="primary">上传图片</el-button>
|
</el-upload>
|
<el-tooltip class="item hidden-sm-and-down" effect="dark" :content="'选择图片'" placement="top">
|
<el-button class="el-icon-picture" size="small" @click="openImagesPick"></el-button>
|
</el-tooltip>
|
</el-col>
|
</el-row>
|
</div>
|
<div v-else-if="file_type == 'file'" class="image-list" style="width:100%">
|
<el-col :span="19">
|
<el-input v-model="sigleFile" autoComplete="off" clearable placeholder="请上传文件"></el-input>
|
</el-col>
|
<el-col :span="5">
|
<el-upload class="upload-demo" ref="upload" action="#" :before-upload="beforeUpload" :http-request="upload">
|
<el-button class="el-icon-upload" size="small" type="primary">点击上传</el-button>
|
</el-upload>
|
</el-col>
|
</div>
|
<div v-else class="image-list" style="width:100%">
|
<el-upload action="#" ref="upload" :before-upload="beforeUpload" :http-request="upload" multiple>
|
<el-button size="small" type="primary">点击上传</el-button>
|
</el-upload>
|
<ul class="el-upload-list el-upload-list--text">
|
<li v-for="(item,i) in fileList" :tabindex="i" :key="i" class="el-upload-list__item is-success">
|
<a @click.stop="handleRemove('files',i,item.url)" class="el-upload-list__item-name"><i class="el-icon-document"></i>{{item.name}}</a>
|
<label class="el-upload-list__item-status-label">
|
<i class="el-icon-upload-success el-icon-circle-check"></i>
|
</label>
|
<i class="el-icon-close"></i>
|
</li>
|
</ul>
|
</div>
|
<el-progress v-if="progress" :stroke-width="5" :percentage="progressPercent"></el-progress>
|
<ImagesPick :imagesDiaShow.sync="imagesDialogStatus" :siglepic.sync ="siglepic" size="small"></ImagesPick>
|
</div>
|
</template>
|
|
<script>
|
import draggable from "vuedraggable"
|
import ImagesPick from '@/components/common/ImagesPick.vue'
|
export default {
|
components: {draggable,ImagesPick},
|
props: {
|
file_ext:{
|
type:String,
|
},
|
image:{
|
type:String,
|
},
|
images: {
|
type: Array,
|
default:()=>[]
|
},
|
file:{
|
type:String,
|
},
|
files:{
|
type:Array,
|
default:()=>[]
|
},
|
upload_type:{
|
type:String,
|
default:'1',
|
},
|
file_type:{
|
type:String,
|
default: null
|
},
|
upload_config_id:{
|
type:Number,
|
},
|
rename:{
|
type:String,
|
default:'1',
|
}
|
},
|
watch: {
|
image() {
|
this.siglepic = this.image
|
},
|
images(){
|
this.imageList = this.images
|
},
|
file(){
|
this.sigleFile = this.file
|
},
|
files(){
|
this.fileList = this.files
|
},
|
siglepic(newVal,oldVal){
|
if(oldVal && oldVal !== newVal){
|
this.deleteFile(oldVal)
|
}
|
this.$emit('update:image',this.siglepic)
|
},
|
sigleFile(newVal,oldVal){
|
if(oldVal && oldVal !== newVal){
|
this.deleteFile(oldVal)
|
}
|
this.$emit('update:file',this.sigleFile)
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
siglepic: this.image,
|
imageList:this.images,
|
sigleFile:this.file,
|
fileList:this.files,
|
showtitle:false,
|
progressPercent:0,
|
progress:false,
|
imagesDialogStatus : false,
|
};
|
},
|
methods:{
|
beforeUpload(item){
|
if(this.file_ext){
|
const fileName = item.name;
|
const fileType = fileName.substring(fileName.lastIndexOf('.')+1);
|
const file_exts = this.file_ext.split(',')
|
if(!file_exts.includes(fileType)){
|
this.$message.error('文件格式错误,不支持'+fileType+'格式')
|
return false
|
}
|
}
|
this.loading = true
|
},
|
upload(item){
|
let formdata = new FormData()
|
let ali = new FormData() //此处非常坑 阿里上传file属性必须要放到最后 所以只能赋值对象
|
formdata.append('file', item.file)
|
formdata.append('upload_config_id', this.upload_config_id)
|
formdata.append('rename', this.rename)
|
const config = {
|
onUploadProgress: progressEvent => {
|
if(progressEvent.lengthComputable) {
|
this.progress = true
|
this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
|
}
|
}
|
}
|
try {
|
this.$axios.post('/admin/Upload/upload', formdata,config).then(res => {
|
if (res.data.status == 200) {
|
if(res.data.filestatus){
|
this.setFilePath(item,res.data.data)
|
}else{
|
if(res.data.data.type == 'qiniuyun'){
|
formdata.append('token',res.data.data.token)
|
formdata.append('key',res.data.data.key)
|
axios.post(res.data.data.serverurl, formdata,config).then(ret => {
|
if(ret.data.key){
|
this.$axios.post('/admin/Upload/createFile',{filepath:res.data.data.domain+'/'+ret.data.key,disk:'qiniuyun'}).then(result => {
|
this.setFilePath(item,res.data.data.domain+'/'+ret.data.key)
|
})
|
}
|
})
|
}else if(res.data.data.type == 'tencent'){
|
let vm = this
|
$.getScript("/assets/js/cos-js-sdk-v5.min.js",function(script){
|
var cos = new COS({
|
SecretId: res.data.data.SecretId,
|
SecretKey: res.data.data.SecretKey
|
});
|
cos.putObject({
|
Bucket: res.data.data.Bucket, // 桶名-APPID 必须
|
Region: res.data.data.Region, //区域 必须
|
Schema: res.data.data.Schema, //区域 必须
|
Key: res.data.data.key, //文件名必须
|
Body: item.file, // 上传文件对象
|
onProgress: function (progressData) {
|
}
|
}, function (err, data) {
|
if(data.Location){
|
const url = res.data.data.Schema+'://'+data.Location
|
this.$axios.post('/admin/Upload/createFile',{filepath:url,disk:'tencent'}).then(result => {
|
vm.setFilePath(item,url)
|
})
|
}
|
})
|
})
|
}else if(res.data.data.type == 'ali'){
|
ali.append('Signature',res.data.data.sign)
|
ali.append('callback',res.data.data.callback)
|
ali.append('OSSAccessKeyId',res.data.data.OSSAccessKeyId)
|
ali.append('policy',res.data.data.policy)
|
ali.append('key',res.data.data.key)
|
ali.append('file', item.file)
|
axios.post(res.data.data.serverurl, ali,config).then(ret => {
|
if(ret.data.code == 1){
|
this.$axios.post('/admin/Upload/createFile',{filepath:ret.data.data,disk:'ali'}).then(result => {
|
this.setFilePath(item,ret.data.data)
|
})
|
}
|
})
|
}else{
|
this.setFilePath(item,res.data.data)
|
}
|
}
|
}else{
|
this.$message.error(res.data.msg)
|
}
|
})
|
}catch (error) {
|
this.$message.error('上传失败')
|
}finally {
|
this.loading = false
|
this.$refs.upload && this.$refs.upload.clearFiles()
|
}
|
},
|
setFilePath(item,filepath){
|
this.progressPercent = 0
|
this.progress = false
|
if(this.file_type == 'images'){
|
this.imageList.push({url: filepath,name:item.file.name})
|
this.$emit('update:images',this.imageList)
|
}else if(this.file_type == 'image'){
|
this.siglepic = filepath
|
this.$emit('update:image',filepath)
|
}else if(this.file_type == 'files'){
|
this.fileList.push({url: filepath,name:item.file.name})
|
this.$emit('update:files',this.fileList)
|
}else{
|
this.sigleFile = filepath
|
this.$emit('update:file',filepath)
|
}
|
},
|
handleRemove(type,index,file) {
|
this.$confirm('是否删除文件?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
if(type == 'image'){
|
this.siglepic = ''
|
this.$emit('update:image','')
|
}else if(type == 'images'){
|
this.imageList.splice(index, 1)
|
this.$emit('update:images',this.imageList)
|
}else if(type == 'file'){
|
this.sigleFile = ''
|
this.$emit('update:file','')
|
}else{
|
this.fileList.splice(index, 1)
|
this.$emit('update:files',this.fileList)
|
}
|
if(file){
|
this.deleteFile(file)
|
}
|
}).catch(() => {})
|
},
|
handlePictureCardPreview(i){
|
this.showtitle = !this.showtitle
|
},
|
deleteFile(val){
|
this.$axios.post('/admin/Base/deleteFile', {filepath:val})
|
},
|
openImagesPick(){
|
this.imagesDialogStatus = true
|
},
|
changeSort(){
|
this.$emit('update:images',this.imageList)
|
},
|
}
|
|
}
|
</script>
|
|
<style lang="scss">
|
.upload-demo{display: inline-block; margin-right: 5px;}
|
.el-upload--picture-card {width:100px; height: 100px; line-height: 100px;}
|
.el-upload-list--picture-card .el-upload-list__item {width:100px; height: 100px; }
|
.el-upload-list__item-name{padding-left: 0;}
|
.el-upload-list__item{line-height: 1.1;}
|
.image-list, .image-item {
|
.image-wrap {
|
position: relative;
|
display: inline-block;
|
box-sizing: content-box;
|
margin: 0 10px 0 0;
|
vertical-align: top;
|
&:hover {
|
.icon-wrap {
|
opacity: 1;
|
}
|
}
|
.imgStyle img{
|
width:100px;
|
height: 100px;
|
border: 1px solid #d9d9d9;
|
border-radius: 6px;
|
}
|
.icon-wrap {
|
position: absolute;
|
left: 0;
|
border-radius: 6px;
|
width: 102px;
|
height: 102px;
|
cursor: default;
|
text-align: center;
|
line-height: 100px;
|
color: #fff;
|
opacity: 0;
|
font-size: 20px;
|
background-color: rgba(0, 0, 0, .7);
|
transition: opacity .3s;
|
.el-icon-zoom-in {
|
cursor: pointer;
|
margin-right: 8px;
|
}
|
.el-icon-delete {
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.image-item {
|
display: inline-flex;
|
}
|
.image-uploader {
|
display: inline-block;
|
.el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
width:100px;
|
height:100px;
|
[class^="el-icon"] {
|
line-height: 100px;
|
font-size: 24px;
|
color: #8c939d;
|
text-align: center;
|
}
|
&:hover {
|
border-color: #409EFF;
|
}
|
}
|
}
|
</style>
|
