图片上传，图片拖拽上传

html部分

<input ref="fileinput" type="file" style="position:absolute;top:0;left:0; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
            <div class="contain-upimg"  v-if="!imgList.length">
                <div class="upload"></div>
                <div class="word">图片仅支持 png、jpg、jpeg、bmp 格式点击、或将图片拖拽到此处</div>
                <div style="width: 88px;height: 32px;position:relative;left:50%;transform: translateX(-50%);margin-top:25px">
                    <Button class="button" type="primary" @click="upload">上传图片</Button>
                </div>
            </div>

js部分

// 选择图片上传
        upload () {
            if (this.vipType === 0) {
                this.showTip = true
            } else {
                this.$refs.fileinput.click()
            }
        },
// 图片确定
        uploadImg (e) {
            const file = e.target.files[0]
            this.fileType = file.type
            if (!['image/png', 'image/jpg', 'image/gif', 'image/jpeg'].includes(this.fileType)) {
                this.$Message.error('请上传正确的图片')
                return
            }
            if (file.size > 20 * 1024 * 1024) {
                this.$Message.error('请选择20M以内的图片')
                return
            }
            if (typeof FileReader === 'function') {
                const reader = new FileReader()
                reader.onload = (event) => {
                    let imgSrc = event.target.result
                    this.imgList.push({
                        imgSrc: imgSrc,
                        name: file.name,
                        rotate: 0
                    })
                }
                reader.readAsDataURL(file)
            } else {
                alert('对不起，您的浏览器暂不支持此功能！')
            }
        },
        // 拖拽上传
        initDragUpload () {
            let dom = this.$refs.drag
            dom.addEventListener('dragover', function(e) {
                e.stopPropagation();
                // 阻止浏览器默认打开文件的操作
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            });
            dom.addEventListener('drop', (e) => {
                e.stopPropagation()
                // 阻止浏览器默认打开文件的操作
                e.preventDefault()
                var files = e.dataTransfer.files
                console.log(files)
                console.log(e)
                Object.values(files).forEach((file) => {
                    const reader = new FileReader()
                    reader.onload = (event) => {
                        let imgSrc = event.target.result
                        this.imgList.push({
                            imgSrc: imgSrc,
                            name: file.name,
                            rotate: 0
                        })
                    }
                    reader.readAsDataURL(file)
                })
            })
        },

需要注意的部分是，FileReader读取图片的相对地址（本机地址），传至服务器需要的信息也可以在此处获取到

const reader = new FileReader()
                reader.onload = (event) => {
                    let imgSrc = event.target.result
                    this.imgList.push({
                        imgSrc: imgSrc,
                        name: file.name,
                        rotate: 0
                    })
                }
                reader.readAsDataURL(file)