1、在确定区域添加 @paste="_handlePaste"方法;
当用户通过浏览器的用户界面发起“粘贴”动作时,将触发 paste 事件。
如果光标处于可编辑的上下文中,事件处理器可以通过调用事件 clipboardData 属性的 getData() 方法来访问剪贴板内容。
<el-form :model="dialogForm" label-width="100px" :rules="rules" ref="dialogFormRef" @paste="_handlePaste">
<el-form-item label="上传图片" prop="imageList">
<el-upload
ref="uploadRef"
multiple
name="files"
v-model:file-list="pictureList"
:action="uploadAction"
:headers="uploadHeader"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-success="handlePictureSuccess"
:on-remove="handleRemove"
>
<div class="picture-upload">
<el-icon><Plus /></el-icon>
<span>上传图片</span>
</div>
</el-upload>
<el-dialog v-model="dialogVisible" class="image-preview">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-form-item>
</el-form>
2、ts部分:在页面部分 v-model:file-list="pictureList" 使用v-model,删除和成功上传的方法可以不使用
import { ref, getCurrentInstance } from 'vue'
import type { UploadProps, UploadUserFile, FormRules, FormInstance, ElUpload } from 'element-plus'
import { getCookieToken } from '@/utils/util'//获取token方法
import axios from 'axios'
const instance = getCurrentInstance() as any
const uploadAction = ref(`接口地址`)
const uploadHeader = ref({
token: getCookieToken('token')
})
const dialogForm = ref({
imageList: [], // 图片列表
})
const pictureList = ref<UploadUserFile[]>([])// 图片列表
const rules = reactive<FormRules>({
imageList: [{ required: true, message: '请上传', trigger: ['blur', 'change'] }]
})
const dialogFormRef = ref<FormInstance>()
const uploadRef = ref<InstanceType<typeof ElUpload>>()
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// 图片删除
const handleRemove: UploadProps['onRemove'] = () => {
}
// 图片预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!
dialogVisible.value = true
}
// 上传成功
const handlePictureSuccess:UploadProps['onSuccess'] = (e, f) => {
}
// 获取图片参数列表--v-model:file-list="pictureList" ,可获取想要的图片参数
const _getPictureList = () => {
const tempImgList = ref([]as any)
if (pictureList.value.length) {
pictureList.value.forEach((element:any) => {
if (element.response) {
tempImgList.value.push(element?.response?.data[0].url)
} else {
tempImgList.value.push(element.url)
}
})
dialogForm.value.imageList = tempImgList.value
}
}
//监听粘贴操作
const _handlePaste = (e:any) => {
let clipboardData = e.clipboardData
if (!clipboardData) {
// chrome
clipboardData = e.originalEvent.clipboardData
}
const items = ref(''as any)
items.value = (e.clipboardData || (window as any).clipboardData).items
const file = ref(null as any)
if (!items.value || items.value.length === 0) {
ElMessage.error('当前浏览器不支持粘贴本地图片,请打开图片复制后再粘贴!')
return
}
for (let i = 0; i < items.value.length; i++) {
// 限制上传文件类型
if (items.value[i].type.indexOf('image') !== -1) {
file.value = items.value[i].getAsFile()
break
}
}
if (file.value) {
const fileData = reactive({
file: ''as any
})
fileData.file = file.value
_uploadfile(fileData)//调用上传接口
}
}
//调用上传接口
const _uploadfile = (fileObj:any) => {
const formData = new FormData()
formData.set('files', fileObj.file)
// 这里使用封装的上传文件的接口
axios.post('接口地址', formData, {
headers: {
token: getCookieToken('token')//获取请求头
}
}).then(res => {
pictureList.value.push(res.data.data[0])
instance.proxy.$forceUpdate()//强制更新
}).catch((e) => {
console.log(e, '报错')
})
}
就可以实现粘贴上传了