<template>
<div>
<div v-for="(domain, index) in this.fileList" :key="index">
<img :src="domain.url" />{
{
domain.url}}{
{
fileList.length}}
</div>
<el-upload class="upload-demo" ref="upload" drag :on-preview="handlePreview" :action='url' :on-change='getpicture'
:file-list="fileList" :auto-upload='this.fileList.length<0' :http-request="uploadFile" multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<div>
<el-button @click="abc">abc</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
url: '',
formDate: '',
// 后台用来判断是使用哪种方式上传图片 还有sftp 和上传到本地两种
code: 'ftp'
}
},
methods: {
uploadFile(file) {
this.formDate.append('file', file.file);
},
handlePreview(file) {
console.log(file);
},
// 为了知道选中了那些文件
getpicture(file, fileList) {
console.log(file.url);
console.log(fileList);
this.fileList = fileList
},
abc() {
// 把文件拼接
this.formDate = new FormData()
this.$refs.upload.submit();
let requestConfig = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$http.post(this.$http.adornUrl(`/upAndDown/save`), this.formDate, requestConfig, code).then(({
data
}) => {
})
}
}
}
</script>
Vue前端的
(/upAndDown/save
)是我后台的地址
package io.renren.modules.upAndDown.controller;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.jcraft.jsch.SftpException;
import io.renren.config.SFTPUtils;
import io.renren.modules.sys.service.SysDeptService;
@RestController
@RequestMapping("upAndDown")
public class UpAndDownController {
@Autowired
private SysDeptService sysDeptService;
@ResponseBody
@RequestMapping("/save")
public void insert (@RequestParam("file") MultipartFile[] file,HttpServletRequest request, @RequestParam("code") String code) {
// TResult result = new TResult();
System.out.println(file.length);
for(MultipartFile multipartFile : file) {
System.out.println(multipartFile.getOriginalFilename());
}
if(code.equals("ftp")) {
}else if(code.equals("sftp")) {
SFTPUtils sftp = new SFTPUtils("root", "ttey@123", "192.168.0.117", 22);
sftp.login();
File filed = new File("D:\\1575523166752.jpg");
InputStream is;
try {
is = new FileInputStream(filed);
String aString =filed.getCanonicalPath();
// 远程服务器根目录/var 远程服务器子目录 /www/html/zd 这么写也行 我懒 直接拼在一起了
// zj.jpg 上传到远程服务器的文件的新的名字 懒得用时间戳了 比如你上传的是a.jpg 在服务器上就显示的是zj.jpg
// is流
sftp.upload("","/var/www/html/zd", "zj.jpg", is);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SftpException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
sftp.logout();
}else if(code.equals("local")) {
for(MultipartFile multipartFile : file) {
// 获得原始文件名
String fileName = multipartFile.getOriginalFilename();
System.out.println("原始文件名"+fileName);
// 重命名文件
String newfileName = new Date().getTime() + String.valueOf(fileName);
System.out.println("重命名文件"+newfileName);
//获得物理路径webapp所在路径
String pathRoot = request.getSession().getServletContext().getRealPath("");
System.out.println("物理路径webapp"+pathRoot);
// 项目下相对路径
String path = "/img/" + newfileName;
System.out.println("项目下相对路径"+pathRoot);
// 创建文件实例
File tempFile = new File(pathRoot + path);
if (!tempFile.getParentFile().exists()