Recently, the business has raised a requirement to use WeChat QQ and other tools to take screenshots based on the original image upload, and then paste them to upload.
It is not difficult to achieve this requirement. You can use el-input's paste to achieve it. Let's take a look at the code.
<template>
<el-dialog append-to-body width="500px" :visible="visible" title="xx弹窗" :close-on-click-modal="false" @open="openDialog" @close="closeDialog('ruleForm')">
<el-form :model="formModel" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width="85px">
<el-form-item label="选择" prop="type_no_arr">
<el-select clearable multiple collapse-tags filterable class="input-layout" v-model="formModel.type_no_arr">
<el-option v-for="item in statusArr" :value="item.type_no" :label="item.name" :key="item.id"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="上传图片" prop="apply_image" v-loading="dataLoading">
<el-input
class="mb10 input-layout"
type="textarea"
:rows="2"
placeholder="粘贴图片即可上传"
v-model="uploadImg"
@paste.native="handlePaste"
>
</el-input>
<el-upload
:file-list="srcList"
:action="imageUrl"
:on-success="uploadSuccess.bind(null, srcList)"
:class="{ hideUpload: srcList.length >= 5 }"
accept=".png,.jpg,.jpeg.gif"
list-type="picture-card"
>
<i slot="default" class="iconfont iconda_jiahao fs24"></i>
<div slot="file" slot-scope="{ file }">
<el-image fit="cover" :src="file.url"></el-image>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file.url)">
<i class="iconfont iconzhong_chakan"></i>
</span>
<span class="el-upload-list__item-delete" @click="uploadRemove(srcList, file.url)">
<i class="iconfont iconzhong_lajitong"></i>
</span>
</span>
</div>
</el-upload>
<el-image-viewer class="modal-image" title="图片预览" :url-list="[dialogImageUrl]" v-if="dialogImgVisible" :on-close="closePreview"></el-image-viewer>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="submit('ruleForm')" :loading="loading">提交</el-button>
</div>
</el-dialog>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import axios from 'axios'
export default {
name: 'dialog',
components: {
ElImageViewer,
},
props: {
visible: Boolean,
data: {
type: Object,
default: () => ({}),
},
userObj: {
type: Object,
default: () => ({}),
},
},
watch: {
visible(v) {
if (v) {
//
}
}
},
data() {
return {
loading: false,
formModel: {
ucode: '',
type_no_arr: '',
apply_image: [],
},
statusArr: [],
rules: {
type_no_arr: [{ required: true, message: '请选择', trigger: 'blur' }],
},
imageUrl: process.env.FILE_URL + '/api/files/upload',
hideUpload: false,
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
srcList: [],
statusArr: [],
dialogImgVisible: false,
uploadImg: '',
imgFile: '',
dataLoading: false
}
},
methods: {
handlePaste(value) {
this.dataLoading = true
let file = value.clipboardData.items[0]
if (file.type.includes('image')) {
let imgFile = file.getAsFile()
const formData = new FormData()
formData.append('file', imgFile)
const axiosInstance = axios.create({ withCredentials: false })
axiosInstance({
method: 'post',
url: process.env.FILE_URL + '/api/files/upload', // 上传地址，视情况更换
data: formData,
})
.then(res => {
// 调用成功回调
console.log('粘贴图片返回的数据=', res.data)
this.dataLoading = false
this.formModel.apply_image.push(res.data.data.file_id)
this.srcList.push({
url: process.env.FILE_URL + '/api/files/show/' + res.data.data.file_id,
file_id: res.data.data.file_id,
})
})
.catch(function (err) {
this.dataLoading = false
console.log(err)
// 上传失败
})
}
},
uploadRemove(item, url, file_id) {
this.srcList = item.filter((file) => file.url !== url)
this.formModel.apply_image = []
this.srcList.map((v) => {
this.formModel.apply_image.push(v.file_id)
})
},
closePreview() {
this.dialogImgVisible = false
},
handlePictureCardPreview(url) {
this.dialogImgVisible = true
this.dialogImageUrl = url
},
uploadSuccess(response, file, fileList) {
if (response.code !== 0) {
this.$notify({
title: '错误',
type: 'error',
message: '上传失败',
})
return
}
this.formModel.apply_image.push(file.response.data.file_id)
this.srcList.push({
url: process.env.FILE_URL + '/**/**/**/' + file.response.data.file_id, // 服务器上传url
file_id: file.response.data.file_id,
})
},
openDialog() {
},
closeDialog(formName) {
this.$emit('update:visible', false)
this.$refs[formName].resetFields()
this.srcList = []
},
submit(formName) {
this.$refs[formName]
.validate()
.then((res) => {
this.loading = true
applyApplication(this.formModel)
.then((res) => {
this.$message({
message: '申请成功！',
type: 'success',
center: true,
})
setTimeout(() => {
this.closeDialog('ruleForm')
this.$emit('confirm', this.formModel.ucode)
}, 200)
})
.catch(() => {
this.$message({
message: '申请失败！',
type: 'error',
center: true,
})
})
.finally(() => {
this.loading = false
})
})
.catch(() => {})
},
},
}
</script>
<style scoped lang="scss">
.modal-image {
top: 0;
z-index: 99999 !important;
}
/deep/ .cover-upload {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
.el-upload,
.el-upload-dragger {
width: 60px;
}
.el-upload--picture-card {
width: 60px;
height: 60px;
box-sizing: border-box;
border-style: solid;
}
.el-upload-list--picture-card {
width: auto;
ul,
li {
width: auto;
}
}
.el-upload-dragger {
height: 100%;
border: transparent;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
&.hide-upload .el-upload--picture-card {
display: none !important;
text-align: left;
}
}
.el-upload-list.el-upload-list--picture-card {
.el-upload-list__item {
width: 146px !important;
height: 146px !important;
margin-right: 13px;
.el-image {
width: 146px;
height: 146px;
border-radius: 4px;
}
}
}
.el-upload-list--picture-card .el-upload-list__item-actions span + span {
margin-left: 0px;
}
/deep/ .hideUpload {
.el-upload.el-upload--picture-card {
display: none !important;
}
.el-upload-list__item {
margin: 0;
& > div {
width: 60px;
height: 60px;
}
}
}
</style>
The effect is as follows:
