上传图片文件

客户端需求:把一个图片文件发送到服务端并读取回馈信息。要求判断文件是否存在及格式是否为jpg或gif并要求文件小于2M。
服务端需求:接收客户端发送过来的图片数据。进行存储后,回馈一个 上传成功字样。支持多用户的并发访问。
//客户端///
public class UploadPicClient {
public static void main(String[] args) {
JFileChooser jfc=new JFileChooser();//弹出文件选择框
int sel=jfc.showOpenDialog(null);//获取选择
if(sel==JFileChooser.APPROVE_OPTION){
File file=jfc.getSelectedFile();//得到选择的文件
if(file.isDirectory()){//判断文件是否是文件夹,一般是不会出现这个的,这里只是简单地写一下
JOptionPane.showMessageDialog(null, "文件选择错误,只能上传文件!");
return;
}

if(!(file.getName().endsWith(".jpg")||file.getName().endsWith("gif"))){//用endsWith判断其后缀名
JOptionPane.showMessageDialog(null, "选择文件格式不正确");
return;
}
if(file.length()>2*1024*1024){//判断文件的额大小是否符合要求
JOptionPane.showMessageDialog(null, "选择文件大小已超过2M不可上传");
return;
}

//满足上传的条件

try {

                        //Client声明Socket

Socket s=new Socket(InetAddress.getByName("127.0.0.1"),9999);

                    //获得名字InetAddress.getByName("127.0.0.1")


BufferedInputStream bis=new BufferedInputStream(new FileInputStream(file));
BufferedOutputStream bout=new BufferedOutputStream(s.getOutputStream());
byte buf[]=new byte[2*1024*1024];//因为限制了文件的额大小所以这里就直接用2M
int len=0;
while((len=bis.read(buf))!=-1){
bout.write(buf,0,len);
bout.flush();
}
s.shutdownOutput();//停止发送标志

InputStream in=s.getInputStream();//获得反馈信息
byte buf2[]=new byte[64];
int len2= in.read(buf2);
String strecho=new String(buf2,0,len2);
System.out.println(strecho);

bis.close();//一定要关流
s.close();
} catch (UnknownHostException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}



}
}

}

//服务器///

public class UploadServer {
public static void main(String[] args) {

try {

    // 声明ServerSocket 来等待握手

ServerSocket server = new ServerSocket(9999);

                    //在这里main用来接收每接收一次就开一个线程,因为题目的要求就是支持多用户运行

while (true) {
Socket s = server.accept();
new Thread(new Receive(s)).start();
}


} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}


class Receive implements Runnable {
private Socket s = null;
public Receive(Socket s) {//写构造函数
this.s = s;
}


@Override
public void run() {
String ip = s.getInetAddress().getHostAddress();//获得ip


// 源:s.getInputStream()
// 目的:FileOutputStream ---文件名设计: IP(1).jpg, IP(2).jpg ....


// 文件存放位置处理
File dir = new File("f:\\pics");
if (!dir.exists()) {
dir.mkdirs();
}
// 文件对象处理(最主要是考虑文件名的生成)
int count = 1;
File file = new File(dir, ip + "(" + (count++) + ").jpg");
while (file.exists()) {
file = new File(dir, ip + "(" + (count++) + ").jpg");
}


try {
FileOutputStream out = new FileOutputStream(file);
InputStream in = s.getInputStream();
byte buf[] = new byte[2 * 1024 * 1024];
int len = 0;
while ((len = in.read(buf)) != -1) {
out.write(buf, 0, len);
}


OutputStream out2 = s.getOutputStream();
out2.write("图片文件上传成功".getBytes());
s.close();
out.close();
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}


}


}
你可以使用 element-plus 提供的 Upload 组件来实现上传图片文件的功能。首先,你需要在项目中安装 element-plus: ``` npm install element-plus --save ``` 然后,在你的代码中引入需要的组件和样式: ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 接下来,你可以在你的模板中使用 Upload 组件来实现上传图片文件的功能,例如: ```html <template> <el-upload class="upload-demo" action="/your-upload-url" :auto-upload="false" :on-change="handleChange" > <el-button slot="trigger" size="small" type="primary">点击上传</el-button> <div slot="tip" class="upload-demo-tip">只能上传jpg/png文件,且不超过2MB</div> </el-upload> </template> <script> export default { methods: { handleChange(file) { // 处理文件变化事件 console.log(file); } } }; </script> ``` 在上面的代码中,你需要根据实际情况修改 `action` 属性的值为你的上传接口地址。`auto-upload` 属性设置为 `false` 表示手动触发上传,你可以根据需求设置为 `true` 来自动上传。 另外,在 `handleChange` 方法中,你可以处理文件变化事件,例如打印上传的文件信息、调用接口进行文件上传等。 以上是使用 element-plus 实现上传图片文件的基本步骤,你可以根据自己的需求进行更详细的配置和处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值