vue+elementui upload手动上传图片

左手的ㄟ右手 2023-07-18 12:46 30阅读 0赞

<el-form-item label="截图">
            <el-upload class="upload-demo" accept="image/png,image/jpg,image/jpeg" ref="upload" :file-list="fileLists" action="#" :on-change="handlePreview" :on-remove="handleRemove" list-type="picture-card" :limit="2" :on-exceed="fileExceed" :auto-upload="false">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-button size="small" type="success" @click="submit">确定</el-button>
          </el-form-item>

data() { 
          return { 
            fileLists: [],
          };
        },

handleRemove(file, fileList) { 
    				this.fileLists = fileList;
    			},
          handlePreview(file, fileList) { 
    				let that = this;
            console.log(file)
    				if (file.raw.type !== 'image/jpg' && file.raw.type !== 'image/png') { 
    					that.$message.error('图片只能是jpg/png格式!');
    					return;
    				}
    				if (file.raw.size > 1024 * 1024 * 2) { 
    					that.$message.error('上传文件大小不能超过 2MB!');
    					return;
    				}
    				that.fileLists = fileList;
    			},
          fileExceed:function(files, fileList){ 
    				this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${ files.length} 个文件，共选择了 ${ fileList.length} 个文件`)
    			},
    submit() { 
    console.log(this.fileLists)
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/3dc581206b5c461eaa3f17f27d7746fa.png