vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 ts 图片粘贴上传

vue3中el-uplod结合ts实现图片粘贴上传

作者:mb646ae08363d13

本文主要介绍了vue3中el-uplod结合ts实现图片粘贴上传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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, '报错')
  })
}

就可以实现粘贴上传了

到此这篇关于vue3中el-uplod结合ts实现图片粘贴上传的文章就介绍到这了,更多相关vue3 ts 图片粘贴上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文