文件上传 + Java后台

一、Java后台使用的上传功能：

SmartUpload：上传文件的大小限制在约为40MB左右。
FileUpload：上传文件的大小可以比较大。

二、原生表单的上传功能：

1、准备工作：

（1）准备一个没有头像的图片。
（2）在后台需要设置一个放置图片的路径。

2、表单的特点：

（1）表单的method必须为post。
（2）表单的enctype属性必须为multiplart/form-data。

表单的enctype属性的默认值为：application/x-www-form-urlencoded

（3）表单中的必须具备name属性。

3、上传文件的最终结果：

（1）文件在后台指定的路径下出现。
（2）在相应的数据库表中应该有所体现。

三、前后台分离模式下的文件上传：

$("form button").on("click",function(event){
	event.preventDefault();
	var formData=new FormData();
	formData.append("avatar",$("#tp")[0].files[0]);
	$.ajax({
		type:"post",
		url:"http://localhost:8080/upload/deal.jsp",
		data:formData,
		contentType:false,
		processData:false,
		success:()=>{
			alert("头像上传成功");
		}
	})
 })

ajaxFileUpload.js：在jQuery基础之上第三方上传插件。

$.ajaxFileUpload({
	url:"http://localhost:8080/upload/deal.jsp",
	type:"post",
	fileElementId:"tp",
	success:()=>{
		alert("头像上传成功了！");
	}
})

四、ElementUI下的头像上传：

html部分

<el-upload  class="avatarUpload"  action="/api/deal.jsp"  :on-success="uploadSuccess" :show-file-list="false">
      <img v-if="imgUrl" :src="imgUrl" class="avatar" />
      <i v-else>+</i>
</el-upload>

js部分

uploadSuccess(response,file){
      var url=window.URL.createObjectURL(file.raw);
      this.imgUrl=url;
}

五、微信小程序下实现上传

单击进入：uniapp官网上传到云存储
单击进入：uniapp官网上传到开发者服务器