先看图
基础效果图首先写出图片效果这是前端美工可以自己进行调整
文章标题
文章描述
选择标题图（图片分辨率建议为：200px * 200px）
这是原文代码
这篇就搞定一个东西文件的代码这部分可以看成一个通用的代码往后遇到文件上传之类的可以
仿照
upload(){
_self = this;
//图片选择API
uni.chooseImage({
count:1,//一次只能选择一个文件
sizeType: ['original','compressed'], //可以指定上传的图片是否压缩还是原图 默认全有
sourceType:['album'] ,//从相册选择图片
success: function(res){
const tempFilePaths = res.tempFilePaths;//const声明后其值不可变
//uni-app的图片上传API
const uploadTask = uni.uploadFile({
url:'http://localhost:8070/upload/file',
filePath:tempFilePaths[0],
name:'file',
success:function(uploadFileRes){
_self.relativePath = uploadFileRes.data;
}
});
uploadTask.onProgressUpdate(function(res){
_self.percent = res.progress;//获得文件上传的进度
console.log("上传进度："+res.progress);
console.log("已经上传的进度："+res.totalBytesSent);
console.log("预计需要上传的数据总长度："+res.totalBytesExpectedToSend);
});
}
});
}各个的含义也进行了标注
注意
_self 需要在开头就进行定义方便使用
下面是中转站return里所需要的东西同样含义也进行了注释
return{
msg:null,
articleTitle:null,//文章标题
articleDescr:null,//文章简介
btnState:false,//上传禁止使用按钮 flase是不禁用
percent:0,//进度条
loading:false,//是否显示进度条
fileName:null,//上传的名称
relativePath:null,//文件上传后 后台返回的路径
cid:null
}这部分内容在uni-app中的API文档中都是可以找到的
下载上传就是和网络相关的就在网络里找同样
接下来是IDEA里的先
加入这两文件
再在pom.xml文件下加入
commons-fileupload
commons-fileupload
1.3.1
com.sun.jersey
jersey-client
1.19
com.sun.jersey
jersey-core
1.19
位置在这里下面
最后创建FileController
//文件的跨域上传
@CrossOrigin(origins = "*")
@PostMapping("file")
@ResponseBody
public String upload(MultipartFile file){
String result=null;
try {
FileInfo fileInfo = JesyFileUploadUtil.uploadFile(file, "http://localhost:8060");
result =fileInfo.getAbsolutPath();
} catch (IOException e) {
e.printStackTrace();
result ="";
}
return result;
}
加入代码段实现文件上传
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）