前端上传图片那些事

今天分享下 上传图片前端需要做的事情,当然肯定有不足地方,欢迎大家各位大神进行批评指正。
form action=”路径”,method=”传送方式 比如post” enctype=”multipart/form-data”
input type=”上传类型 在这里是file” name=”后台获取的值 后台可以通过name的值获取图片的信息” multipart 不用多说这是批量上传的一个属性
input type=”submit” value=”点击上传”
form
以上都是标签来写,我不知道为什么我用标签来写不显示里面内容,所以请大家注意。

补充:
type="button" ,"submit" 的区别

  Submit是专门用于提交表单的Button,与Button的区别主要有两点:
  type=button 就单纯是按钮功能
  type=submit 是发送表单
   (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此
   (2)表单提交时,所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交,除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交。
  但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
  
  使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.
  
  用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。
  
  
  执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。
  
  执行完onClick,跳转文件在 js文件里控制。提交需要onClick。
  比如:
  1,οnclick=”form1.action=’a.jsp’;form1.submit();” 这样就实现了submit的功能了。
  
 讲白一些,就是submit会有一个跳转,页面会刷新;而button不会刷新,就是一个button;可以用来生成按钮,更加灵活,样式更好控制。  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 前端使用HTML5的File API获取用户选择的图片,然后将图片转成二进制流,通过Ajax请求发送给后端。 后端使用阿里云OSS SDK,上传图片到OSS。具体步骤如下: 1. 引入阿里云OSS SDK依赖: ``` <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.10.2</version> </dependency> ``` 2. 在Springboot配置文件中配置OSS相关参数: ``` oss.endpoint=oss-cn-hangzhou.aliyuncs.com oss.accessKeyId=your_access_key_id oss.accessKeySecret=your_access_key_secret oss.bucketName=your_bucket_name ``` 3. 在Controller中编写上传图片的接口: ``` @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) throws IOException { // 获取文件名 String fileName = file.getOriginalFilename(); // 上传到OSS OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); ossClient.putObject(bucketName, fileName, file.getInputStream()); // 关闭OSS客户端 ossClient.shutdown(); // 返回图片URL return "https://" + bucketName + "." + endpoint + "/" + fileName; } ``` 4. 前端通过Ajax请求上传图片: ``` function uploadImage() { var file = document.getElementById("file").files[0]; var formData = new FormData(); formData.append("file", file); $.ajax({ url: "/upload", type: "POST", data: formData, processData: false, contentType: false, success: function(data) { console.log(data); } }); } ``` 需要注意的是,前端上传的文件大小可能比较大,需要在后端进行文件大小和类型的校验,防止恶意攻击和服务器压力过大。 ### 回答2: 前端上传图片到Spring Boot后端,然后后端将图片上传到OSS(Object Storage Service)中。 首先,前端需要通过一个表单页面或者其他方式选择要上传的图片。当用户选择完成后,前端可以使用一个AJAX请求将图片发送给后端。 在后端,我们需要配置一个用于接收图片并上传到OSS的路由或API接口。这个接口需要处理用户上传的图片文件,并将其保存到本地的临时文件夹中。 然后,我们需要引入相应的OSS客户端库,比如阿里云的OSS SDK。在后端中,我们需要配置OSS的相关信息,比如Access Key ID(访问密钥ID)、Access Key Secret(访问密钥密码)、OSS域名等。 接下来,我们需要将保存在本地的临时文件上传到OSS。首先,我们需要创建一个OSSClient对象,使用OSSClient的构造函数传入配置的OSS相关信息。 然后,我们可以调用OSSClient对象的putObject方法来上传图片。在putObject方法中,我们需要指定要上传的目标Bucket(OSS存储空间),以及目标图片的存储路径和文件名。同时,我们也需要指定要上传的文件的本地路径。 上传完成后,我们可以在OSS中看到上传的图片。 最后,在后端中,我们可以返回一个上传成功的消息或者其他相应的数据给前端,以表示图片上传到OSS的状态。 总结而言,前端上传图片到Spring Boot后端,后端将图片上传到OSS步骤包括:前端选择图片并上传至后端,后端保存图片到本地临时文件夹,配置OSS并引入相关OSS客户端库,创建OSSClient对象并使用putObject方法将图片上传至OSS,返回上传成功的消息给前端
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值