vue3+element-push 实现input框粘贴图片或文本，图片上传。

vue3+element-push 实现input框粘贴图片或文本，图片上传。

<el-input
          style="height: 100px; width: 100%"
          @paste.capture.prevent="pasting"
          v-model="textMsg"
          placeholder="请输入"
        />
        // 展示上传的列表--可不要
       <div
        style="margin-bottom: 10px; line-height: 20px"
        v-show="filesList"
        v-for="(item, index) in filesList"
        :key="index"
      >
        <div class="zi">
        <img
            :src="item.filePath"
            class="record-img"
            v-if="
              item.fileType === 'png' ||
              item.fileType === 'jpg' ||
              item.fileType === 'jpeg' ||
              item.fileType === 'ico' ||
              item.fileType === 'bmp' ||
              item.fileType === 'gif'
            "
          />
          <img
            src="/src/assets/imgs/fileImg/docx.png"
            class="record-img"
            v-else-if="item.fileType === 'doc' || item.fileType === 'docx'"
          />
          <img
            src="/src/assets/imgs/fileImg/xlsx.png"
            class="record-img"
            v-else-if="item.fileType === 'xls' || item.fileType === 'xlsx'"
          />
          <img
            src="/src/assets/imgs/fileImg/zip.png"
            class="record-img"
            v-else-if="item.fileType === 'zip'"
          />
          <img
            src="/src/assets/imgs/fileImg/rar.png"
            class="record-img"
            v-else-if="item.fileType === 'rar'"
          />
          <img
            src="/src/assets/imgs/fileImg/ppt.png"
            class="record-img"
            v-else-if="item.fileType === 'ppt' || item.fileType === 'pptx'"
          />
          <img
            src="/src/assets/imgs/fileImg/pdf.png"
            class="record-img"
            v-else-if="item.fileType === 'pdf'"
          />
          <img
            src="/src/assets/imgs/fileImg/txt.png"
            class="record-img"
            v-else-if="item.fileType === 'txt'"
          />
          <img
            src="/src/assets/imgs/fileImg/html.png"
            class="record-img"
            v-else-if="item.fileType === 'html'"
          />
          <img src="/src/assets/imgs/fileImg/file.png" class="record-img" v-else />
          <div style="folat: left; margin-left: 40px">
            <el-link
              :href="item.filePath"
              :underline="false"
              download
              target="_blank"
              type="primary"
            >
              {{ item.fileName }}
            </el-link>
          </div>
          <el-icon
            style="position: absolute; right: 20px; top: 7px; color: red"
            size="16"
            @click="deleteFile(index)"
            ><Delete
          /></el-icon>
        </div>
      </div> 
···
···
...
// js部分截图 /
const textMsg = ref('')
const pasting = async (event) => {
  let txt = event.clipboardData.getData('Text')
  if (typeof txt == 'string') {
    textMsg.value += txt
  }
  let cutFile = null
  const items = (event.clipboardData || window.clipboardData).items
  if (items.length) {
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf('image') !== -1) {
        cutFile = items[i].getAsFile()
        message.success('截图上传中请稍等。。。')
        await FileApi.updateFile({ file: cutFile }).then((res) => {
          filesList.value.push({
            filePath: res.data,
            fileType: cutFile.name.split('.')[1],
            fileName: cutFile.name
          })
        })
        break
      }
    }
  }
}
···