element-ui+vue2实现粘贴上传
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:`
{{title}}
{{tip}}
![]()
`,
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; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
var items='';
items = (e.clipboardData || window.clipboardData).items;
let file = null;
if (!items || items.length === 0) {
this.$message.error('当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！');
return;
}
// 搜索剪切板items
for (let i = 0; i < items.length; i++) {
// 限制上传文件类型
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
// 对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数
if(file){
// console.log(file)
// // 生成一个本地的URL用于预览
// const url = URL.createObjectURL(file);
// console.log(url)
// 添加到fileList中，这里示意性地只存放url，实际应根据需求进行适当处理
//this.fileList.push({ url: url });
let formData = new FormData();
formData.append('file', file, 'pasted_image.png'); // '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(), // 确保每个文件有唯一的uid
status: 'success' // 设置文件状态为成功
};
//this.fileList = this.fileList.filter(file => !file.url.startsWith('blob:'));
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(()=>{
// 获取遮罩层dom
let domImageMask = document.querySelector(".el-image-viewer__mask");
if (!domImageMask) {
return;
}
domImageMask.addEventListener("click", () => {
// 点击遮罩层时调用关闭按钮的 click 事件
document.querySelector(".el-image-viewer__close").click();
});
})
}
}
}
</script>