vue3+element-push 实现input框粘贴图片或文本,图片上传。
<el-inputstyle="height: 100px; width: 100%"@paste.capture.prevent="pasting"v-model="textMsg"placeholder="请输入"/>// 展示上传的列表--可不要<divstyle="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'"/><imgsrc="/src/assets/imgs/fileImg/docx.png"class="record-img"v-else-if="item.fileType === 'doc' || item.fileType === 'docx'"/><imgsrc="/src/assets/imgs/fileImg/xlsx.png"class="record-img"v-else-if="item.fileType === 'xls' || item.fileType === 'xlsx'"/><imgsrc="/src/assets/imgs/fileImg/zip.png"class="record-img"v-else-if="item.fileType === 'zip'"/><imgsrc="/src/assets/imgs/fileImg/rar.png"class="record-img"v-else-if="item.fileType === 'rar'"/><imgsrc="/src/assets/imgs/fileImg/ppt.png"class="record-img"v-else-if="item.fileType === 'ppt' || item.fileType === 'pptx'"/><imgsrc="/src/assets/imgs/fileImg/pdf.png"class="record-img"v-else-if="item.fileType === 'pdf'"/><imgsrc="/src/assets/imgs/fileImg/txt.png"class="record-img"v-else-if="item.fileType === 'txt'"/><imgsrc="/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"downloadtarget="_blank"type="primary">{{ item.fileName }}</el-link></div><el-iconstyle="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 = nullconst items = (event.clipboardData || window.clipboardData).itemsif (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}}}
}
···