上传监听类

package com.huawei.hedex.upload;

import java.io.Serializable;

/**
* 上传监听类,实现OutputStreamListener接口
* @author j65181
* @version V1.0, 2007-8-4
* @see
*/
public class UploadListener implements OutputStreamListener
{
/**
* 注释内容
*/
private static final long serialVersionUID = 4780612136871889921L;

// 保存状态的内部类对象
private FileUploadStats fileUploadStats = new FileUploadStats();

/**
* 构造方法,传入文件流总大小
* @param totalSize
*/
public UploadListener(long totalSize)
{
fileUploadStats.setTotalSize(totalSize);
}

public void start()
{
// 设置当前状态为开始
fileUploadStats.setCurrentStatus("start");
}

public void bytesRead(int byteCount)
{
// 将已读取的数据保存到状态对象中
fileUploadStats.incrementBytesRead(byteCount);
// 设置当前的状态为读取过程中
fileUploadStats.setCurrentStatus("reading");
}

public void error(String s)
{
// 设置当前状态为出错
fileUploadStats.setCurrentStatus("error");
}

public void done()
{
// 设置当前已读取数据等于总数据大小
fileUploadStats.setBytesRead(fileUploadStats.getTotalSize());
// 设置当前状态为完成
fileUploadStats.setCurrentStatus("done");
}

public FileUploadStats getFileUploadStats()
{
// 返回当前状态对象
return fileUploadStats;
}

/**
* 用来保存上传文件的状态
* @author j65181
* @version V1.0, 2007-8-4
* @see
*/
public static class FileUploadStats implements Serializable
{
/**
* 注释内容
*/
private static final long serialVersionUID = -6689000695807341372L;

//总数据的大小
private long totalSize = 0;

//已读数据大小
private long bytesRead = 0;

//开始读取的时间
private long startTime = System.currentTimeMillis();

//默认的状态
private String currentStatus = "none";

//获得已经上传得时间
public long getElapsedTimeInSeconds()
{
return (System.currentTimeMillis() - startTime) / 1000;
}

public void incrementBytesRead(int byteCount)
{
this.bytesRead += byteCount;
}

/**
* @return the totalSize
*/
public long getTotalSize()
{
return totalSize;
}

/**
* @param totalSize the totalSize to set
*/
public void setTotalSize(long totalSize)
{
this.totalSize = totalSize;
}

/**
* @return the currentStatus
*/
public String getCurrentStatus()
{
return currentStatus;
}

/**
* @param currentStatus the currentStatus to set
*/
public void setCurrentStatus(String currentStatus)
{
this.currentStatus = currentStatus;
}

/**
* @return the bytesRead
*/
public long getBytesRead()
{
return bytesRead;
}

/**
* @param bytesRead the bytesRead to set
*/
public void setBytesRead(long bytesRead)
{
this.bytesRead = bytesRead;
}
}
}
在 Element UI 中,你可以使用 `el-upload` 组件来实现图片上传,并通过监听相关事件来获取上传状态和上传成功后的图片地址。 首先,在 HTML 中使用 `el-upload` 组件,设置相应的属性和事件监听: ```html <el-upload class="upload-demo" action="/your-upload-url" :on-success="handleSuccess" :before-upload="beforeUpload" :auto-upload="false" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过2MB</div> </el-upload> ``` 在以上示例中,`action` 属性指定了上传文件的接口地址,`on-success` 属性绑定了上传成功后的回调方法 `handleSuccess`,`before-upload` 属性绑定了上传前的回调方法 `beforeUpload`,`auto-upload` 属性设置为 `false` 表示不自动上传。 然后,在 Vue 实例中定义这两个回调方法: ```javascript methods: { handleSuccess(response, file, fileList) { // 上传成功后的回调函数 console.log('上传成功'); console.log(response); // 服务器返回的数据 console.log(file); // 上传的文件对象 console.log(fileList); // 文件列表数组 }, beforeUpload(file) { // 上传前的回调函数 const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG) { this.$message.error('只能上传 JPG/PNG 格式的图片'); return false; } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB'); return false; } r
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值