vue实现输入框粘贴图片自动上传图片文件
输入框获取粘贴内容
·
背景
需求背景是用户粘贴截图或者复制的图片后,需要自动上传文件后端。
效果图:
实现思路是:
利用input输入自带的方法paste。根据文件类型来判定是不是图片,如果是图片就把文件上传到后端。
<template>
<div class="main">
<el-input
type="textarea"
:rows="2"
placeholder="粘贴图片即上传附件"
v-model="textarea"
@paste.native="handlePaste"
>
</el-input>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [
{
name: "food.jpeg",
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
},
{
name: "food2.jpeg",
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
},
],
textarea: "",
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
files.length + fileList.length
} 个文件`
);
},
handlePaste(value) {
let items = value.clipboardData.items[0]
if(items.type.includes('image')) {
this.file = items.getAsFile()
//正常流程应该是用拿到的file文件,使用formData去上传到后端,拿到后端返回的图片链接push进去fileList
this.fileList.push({
name: "food2.jpeg",
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
},)
}
console.log(this.file, '粘贴内容')
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
},
};
</script>
<style lang="scss" scoped>
.main {
margin: 50px 300px;
}
.upload-demo {
margin-top: 30px;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)