axios实现⽂件上传前端代码
```javascript
<input type="file" ref="upload" >
upload(){
var objfile = this.$refs.upload.files[0];
// if((objfile.size/1024/1024)>0){
// this.$message.info("⽂件不能⼤于1MB")
// return false;
// }
// console.log(this.$refs.upload.files[0])
// if (pe!="image/jpeg" || pe!="image/png"){
/
/ this.$message.info("⽂件只能是jpg或者png格式")
// return false;
// }
var formData = new FormData();
formData.append('file',this.$refs.upload.files[0]);
var flag;
fileupload(formData).then(res=>{
if (de!=200){
console.log(res)
flag = true;
}else {
flag = false;
}
}
```
先分装axios请求
```javascript
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = ate({
baseURL: 'localhost:8888',
/
/timeout: 10000,
headers: {
'Content-Type': "application/json;charset=utf-8",
'Authorization': Item("token")
},
changeOrigin: true
})
// 2.axios的
// 2.1.请求拦截的作⽤
quest.use(config => {
return config
}, err => {
// console.log(err);
})
// 2.2.响应拦截
sponse.use(res => {
return res.data
}, err => {
console.log(err);
})
// 3.发送真正的⽹络请求
return instance(config)
}
```
```javascript
//⽂件上传
export function fileupload(data) {
return request({
url: '路径',
headers:{"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},//设置响应投
method: 'POST',
data:data
});
}
```
//后端接收
````java
@RequestMapping("fileupload")
@ResponseBody
public ResultVO<Boolean> fileupload(@RequestParam("file") MultipartFile file){
ResultVO<Boolean> resultVO;
AoaUser aoaUser = User(token);
Calendar calendar = Instance();
calendar.setTime(new Date()); //放⼊Date类型数据
String (Calendar.YEAR)+"-"+(Calendar.MONTH)+"-"+(Calendar.DATE);
if(file.isEmpty()){
resultVO = new ResultVO<>(ErrorCode.NULL);
resultVO.setData(false);
return resultVO;
}
String attachmentName = OriginalFilename();
String attachmentShuffix = attachmentName.substring(attachmentName.lastIndexOf(".")+1);
String attachmentPath = "D:/"+datestr+"-"+UserName()+"-"+UUID.randomUUID()+"."+attachmentShuffix;
String attachmentSize = Size()+"";
String attachmentType = "image/"+attachmentShuffix;
String model = "aoa_bursement";
Date upload_time = new Date();
String userId = UserId().toString();
AoaAttachmentList aoaAttachmentList = new
AoaAttachmentList(attachmentName,attachmentPath,attachmentShuffix,attachmentSize,attachmentType,model,upload_time,userId); File dest = new File(attachmentPath);
if(!ParentFile().exists()){ //判断⽂件⽗⽬录是否存在
}
try {
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
resultVO = new ResultVO<>(ErrorCode.NULL);
resultVO.setData(false);
return resultVO;
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
resultVO = new ResultVO<>(ErrorCode.NULL);
resultVO.setData(false);
return resultVO;
}
aoaAttachmentList = aoaAttachmentListService.insertAtt(aoaAttachmentList);
Long proFileId = AttachmentId();
if (AttachmentId()!=0 ){
resultVO = new ResultVO<>(ErrorCode.SUCCESS);
resultVO.setData(true);
return resultVO;
}else {
resultVO = new ResultVO<>(ErrorCode.NULL);
resultVO.setData(false);
return resultVO;
}
}
前端大文件上传解决方案````

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。