Vue实现点击上传图片预览图片功能

曾经终败给现在 2024-04-18 21:39 217阅读 0赞

### 效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 1]

##### 删除按钮是我自己做的 #####

##### 下面上源代码（如果不理解，请在下面提出问题） #####

### html(采用了element组件) ###

### js ###

data(){
    	preImg:'', //存放预览的图片
    	postData:{
    		img:'',.
    },//存放提交的图片
    }
     // ---测试上传图片
            onPickFile2() {
                this.$refs.fileInput.click();
            },
            getFile2: function(e) {
                // console.log("e是什么",e)
                let $target = e.target || e.srcElement;
                let file = $target.files[0];
                // 上传的图片
                this.postData.img = file;   //存放提交图片
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = data => {
                    let res = data.target || data.srcElement;
                    //   预览的图片
                    this.preImg = res.result;
                };
                // document.getElementById("upimg").value = "";  //这是能否上传同一张图片的关键
                console.log("gaidongchenggong");
            },
            // ---↑

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0cc6e846583d4a028306aac417d4f878.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ac3a4aae0d734654a5b4dbb26cba0711.png