我们先不讨论ElementUI的 el-upload 标签是怎么使用的,先研究一下后端的代码是怎么写的
在本机安装一个nginx,并且知道它的部署目录是什么,我的系统macOS,nginx的访问根目录就是 /usr/local/var/www ,如果是windows,那么根目录就是 nginx安装目录下的html目录下(听度娘说的)
这个nginx是用来永久保存上传的文件的,因为idea内置tomcat重新启动的时候,就会把这些已经上传的图片给清理掉,所以要复制一份到nginx
新建一个springboot的工程,建立一个controller类,名叫FileUploadController吧
其中,copy方法里边,有4个参数
copy(String source, String dest,String fileName, int bufferSize)
source参数要传入本地文件的绝对路劲,先上传到idea内置tomcat,会生成一个图片的绝对路劲,代入进去就行了,这个路劲当然是要包含图片文件名的
dest参数要传入复制的目标路劲,目标路劲最后面就不需要带文件名了,只是一个目录
fileName就是文件名了,不多说
bufferSize byte数组大小,填个适当的数字就行
package com.xeon.orderconsumer.controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
@RestController
@RequestMapping("/imgupload")
public class FileUploadController {
String nginxServer = "http://127.0.0.1:8080";
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd");
@PostMapping("uploadHousekeeperImage")
public Map<String,Object> fileupload(MultipartFile file, HttpServletRequest request) {
Map<String,Object> result = new HashMap<>();
String originName = file.getOriginalFilename();
if(!(originName.endsWith(".jpg")||originName.endsWith(".jpeg")||originName.endsWith(".png"))){
result.put("status","error");
result.put("msg","文件类型找不到");
return result;
}
String format = sdf.format(new Date());
String realPath = request.getServletContext().getRealPath("/")+format;
System.out.println("realPath:::"+realPath);
File folder = new File(realPath);
System.out.println("folder:::"+folder);
if(!folder.exists()){
folder.mkdirs();
}
String newName = UUID.randomUUID().toString().substring(0,16)+".jpg";
try{
file.transferTo(new File(folder,newName));
String url = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+format+"/"+newName;
copy(realPath+"/"+newName,"/usr/local/var/www"+format,newName,64);
// String url = request.getScheme()+"://"+"127.0.0.1"+":"+"8080"+format+newName;
result.put("status","success");
result.put("url",nginxServer+"/"+format+"/"+newName);
result.put("localUrl",url);
}catch (Exception e){
result.put("status","error");
result.put("msg",e.getMessage());
return result;
}
return result;
}
public static void copy(String source, String dest,String fileName, int bufferSize) {
System.out.println(source);
System.out.println(dest);
System.out.println(fileName);
InputStream in = null;
OutputStream out = null;
try {
in = new FileInputStream(new File(source));
File newPath = new File(dest);
if(!newPath.exists()){
newPath.mkdirs();
}
out = new FileOutputStream(new File(dest+"/"+fileName));
byte[] buffer = new byte[bufferSize];
int len;
while ((len = in.read(buffer)) > 0) {
out.write(buffer, 0, len);
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
使用postman测试一下请求,看能不能上传文件
确实是可以的,已经上传到了,nginx的目录下
postman返回了这些数据,我们用url属性的值复制过来访问一下浏览器,应该是没问题的,浏览器会显示一张图片
vue前端的ElementUI的el-upload怎么使用?标签的属性含义是什么?
先上代码,往下解析这些属性是什么意思
el-upload 标签
<el-upload
action="/image/imgupload/uploadHousekeeperImage"
:on-preview="handlePreview"
:on-success="successUpload"
accept="*"
:on-remove="onRemove"
:limit="10">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">上传照片</div>
<img :src="imageUrl" style="width: 100px;height: 100px" v-if="imageUrl!==''">
</el-upload>
定义数据,图片的url,即访问地址
data(){
return {
imageUrl: ''
}
}
定义方法:
methods:{
onRemove(file, fileList){
this.imageUrl = ''
},
successUpload(response, file, fileList){
this.imageUrl = file.response.url;
},
handlePreview(file) {
window.open(file.response.url);
console.log(file.response.url);
}
}
el-upload标签常用属性是什么意思?
这个action属性就是官方文档没有说清楚的地方,这里我们把它说清清楚了
① action="/image/imgupload/uploadHousekeeperImage"
我们先打开config目录下的index.js文件,看看代理表
action等于这个/image/imgupload/uploadHousekeeperImage,就相当于发送一个这样的请求:"http://127.0.0.1:8883/imgupload/uploadHousekeeperImage" , 这个请求地址恰好跟postman发送的url是一样的
这个代理表的意思就是在vue里面发送的请求url以image开头的时候,就会请求 http://127.0.0.1:8883 的服务器,往后根据实际情况写请求路劲
②:on-preview="handlePreview" 表示点击文件列表的某一项项以后,触发haldlePreview函数
带了file参数,以获取文件的一些信息
③ :on-success="successUpload" 上传成功以后会调用的函数
在这里,直接获取文件的访问地址,赋值给imageUrl变量
其余的属性都见名知意了,ElementUI官网文档很详细