element-ui+vue2实现粘贴上传
<style scoped lang="scss">
.img-upload{
position: relative;
display: inline-block;
margin-right: 9px;
}
.image {
width: 100px;
height: 100px;
margin-right: 9px;
}
.image:last-child{
margin-right: 0;
}
.img-upload .el-upload--picture-card,.img-upload .el-upload-list__item{
height: 100px;
width: 100px;
line-height: 100px;
}
.img-upload .el-icon-close-tip{
display: none !important;
}
.img-upload .el-upload-list__item-status-label{
display: none !important;
}
.hide .el-upload--picture-card {
display: none;
}
.img-upload-title-required:before {
content: '*';
color: #F56C6C;
margin-right: 4px;
}
.el-upload__tip{
color: red;
}
.hide.el-upload-list .el-upload-list__item.is-focus {
border: 2px solid red;
}
</style>
<script async defer>
var uploadMultiImage = {
template:`
<div class="img-upload">
<div v-if="!detail">
<el-upload
ref="upload"
:class="{hide:hideUpload}"
:action="action"
list-type="picture-card"
:limit="limit"
:file-list="fileList"
:multiple="multiple"
:on-success="uploadSuccess"
:on-exceed="uploadExceed"
:on-change="uploadChange"
:on-remove="uploadRemove"
:on-preview="handlePictureCardPreview"
@paste.native="handlePaste">
<i class="el-icon-plus"></i>
</el-upload>
<div :class="required?'img-upload-title img-upload-title-required':'img-upload-title'">{{title}}</div>
<div v-if="tip" slot="tip" class="el-upload__tip">{{tip}}</div>
</div>
<div v-else>
<div v-if="imageList" >
<el-image v-for="(item,index) in fileList" :key=item.url :src="item.url+'?w=80&h=80'" class="image" :preview-src-list="[item.url]" @click.stop="handleClickItem"></el-image>
</div>
</div>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
`,
props: {
urls:{
type: [String, Array],
default(){
return []
}
},
action:{
type:String,
default:'/v1/api/index/upload'
},
detail:{
type:Boolean,
default:false
},
multiple:{
type:Boolean,
default:false
},
title:{
type:String,
default:''
},
limit:{
type:Number,
default:1
},
required:{
type:Boolean,
default:false
},
tip:{
type:String,
default:''
},
},
model:{
prop:'urls',
event:'valChange'
},
created(){
},
watch:{
urls(val){
this.imageList = val
},
},
data(){
return {
fileList: this.pathUrls(this.urls),
imageList: this.urls,
hideUpload: this.isHideUpload(this.urls),
dialogImageUrl: '',
dialogVisible: false
}
},
mounted() {
},
computed:{
},
methods:{
handlePaste(e) {
var clipboardData = e.clipboardData;
if (!clipboardData) {
clipboardData = e.originalEvent.clipboardData;
}
var items='';
items = (e.clipboardData || window.clipboardData).items;
let file = null;
if (!items || items.length === 0) {
this.$message.error('当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！');
return;
}
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
if(file){
let formData = new FormData();
formData.append('file', file, 'pasted_image.png');
console.log(formData);
this.uploadPastedImage(formData);
}
},
uploadPastedImage(formData) {
fetch(this.action, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.code) {
console.log(data);
const newFile = {
name: 'pasted_image.png',
url: data.domain + '/' + data.data[0],
uid: Date.now(),
status: 'success'
};
this.fileList.push(newFile);
this.valChange();
} else {
this.$message.error('上传失败，请稍后重试');
}
})
.catch(error => {
this.$message.error('网络错误，请稍后重试');
console.error('Error:', error);
});
},
pathUrls(urls){
let fileList = []
if(urls.length>0){
urls.forEach(function(v) {
if(!v.includes('http')){
fileList.push({
'name': v,
'url':'http://image.spocoo.com/' + v,
})
}else {
fileList.push({
'name': v,
'url': v,
})
}
});
}
return fileList
},
nameUrls(fileList){
let urls = []
fileList.forEach(function(v) {
if(v.response){
urls.push(v.response.data[0])
}else{
urls.push(v.url)
}
});
return urls
},
isHideUpload(urls){
return urls.length >= this.limit;
},
uploadSuccess(res,file, fileList){
if (res.code){
this.fileList = fileList
this.valChange()
}else{
layer.msg('网络走丢了，请稍后重试上传哦')
}
},
uploadExceed(){
layer.msg(this.title+'最多可以上传'+this.limit+'张图片')
},
uploadChange(file, fileList) {
this.hideUpload = fileList.length >= this.limit;
},
uploadRemove(file, fileList) {
this.fileList.splice(this.fileList.findIndex(e => e.url === file.url), 1)
this.hideUpload = fileList.length >= this.limit;
this.valChange()
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
valChange(){
this.$emit('valChange',this.nameUrls(this.fileList))
},
handleClickItem(){
this.$nextTick(()=>{
let domImageMask = document.querySelector(".el-image-viewer__mask");
if (!domImageMask) {
return;
}
domImageMask.addEventListener("click", () => {
document.querySelector(".el-image-viewer__close").click();
});
})
}
}
}
</script>
