1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!--文件上传弹出框-->
<el-button type="primary" round @click="uploadvisible=true">添加文件</el-button>
<!-- 表格显示图片 -->
<template>
<img :src="imgUrl" width="100px" height="100px"/>
</template>
<el-dialog
:visible.sync="uploadvisible"
>
<el-form>
<el-form-item label="文件" prop="file">
<el-input v-model="fileName" :disabled="true"></el-input>
<br>
<el-upload class="upload-demo"
ref=""
action=""
:limit="1"
:before-upload="beforeUpload">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传.jpg或者.png格式，且不超过5MB</div>
</el-upload>
<el-button @click="uploadvisible = false">取消</el-button>
<el-button type="primary" @click="submitUpload">确定</el-button>
</el-form-item>
</el-form>
</el-dialog>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

data() {
return {
//文件名
fileName: "",
//上传弹出框的提示
uploadvisible: false,
//图片url
imgUrl: "",
}
},
methods: {
//文件上传
//要在data中定义fileName和visible
//检查文件格式大小等
//上传文件校验
beforeUpload(file) {
console.log(file, '文件');
this.files = file;
//只允许上传文件的格式
const extension = file.name.split('.')[1] === 'jpg'
const extension2 = file.name.split('.')[1] === 'png'
const isLt2M = file.size / 1024 / 1024 < 5
if (!extension && !extension2) {
this.$message.warning('只能是 .jps、.png格式!')
return
}
if (!isLt2M) {
this.$message.warning('大小不能超过 5MB!')
return
}
this.fileName = file.name;
return false // 返回false不会自动上传
}
,
//提交上传
submitUpload() {
var that = this;
console.log('上传' + this.files.name)
if (this.fileName == "") {
this.$message.warning('请选择要上传的文件！')
return false
}
let fileFormData = new FormData();
fileFormData.append('file', this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
let requestConfig = {
headers: {
//消息头
'Content-Type': 'multipart/form-data'
},
}
this.$http.post(`/back/car/uploadAvator`, fileFormData, requestConfig).then(response => {
//console.log(response.data.result);
that.$message.success(response.data.msg)
that.imgUrl = response.data.result;
//console.log(that.imgUrl)
//关闭弹框
that.uploadvisible = false;
})
},
}

1
2
3
4
5
6
7
<!--阿里云oss依赖-->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@RestController
@RequestMapping("/back/check")
@Api(tags="上传文件")
@CrossOrigin
public class CheckController {
@Resource
private OssService ossService;
/**
* 上传头像到阿里云的oss
* CommonResult 这是工具类，没有可以使用map替代
*/
@PostMapping("uploadAvator")
public CommonResult uploadOssFile(@RequestParam("file") MultipartFile file) {
System.out.println("file::"+file);
String url = ossService.uploadFileAvatar(file);
System.out.println("url::"+url);
return new CommonResult(2000,"文件上传成功",url);
}
}

1
2
3
4
5
import org.springframework.web.multipart.MultipartFile;
public interface OssService {
String uploadFileAvatar(MultipartFile file);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package com.carrent.back.service.impl;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.carrent.back.service.OssService;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.UUID;
@Service
public class OssServiceImpl implements OssService {
@Override
public String uploadFileAvatar(MultipartFile file) {
//上传的操作
//将文件的名字编程唯一的再上传
int i = file.getOriginalFilename().lastIndexOf(".");//获取上传的文件的原名
String suffix = file.getOriginalFilename().substring(i);
//System.out.println("fileanme文件原名："+suffix);
//借助
UUID 将文件名编程唯一的 重新定义
String uuid = UUID.randomUUID().toString();
//定义上传oss的文件路径
String datePath = "vue";
String filename = datePath + "/" + uuid + suffix;
// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "oss-cn-beijing.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
String accessKeyId = "xxxx";
String accessKeySecret = "xxxx";
String bucketName = "你的仓库名称";
// <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
String objectName = filename;
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// 上传文件到指定的存储空间（bucketName）并将其保存为指定的文件名称（objectName）。
try {
//file.getInputStream() 当前文件的输入流
ossClient.putObject(bucketName, objectName, file.getInputStream());
} catch (IOException e) {
e.printStackTrace();
}
// 关闭OSSClient。
ossClient.shutdown();
//https://tutu-image.oss-cn-beijing.aliyuncs.com/19c55f39-a82a-427c-9e81-25081271de06.jpg
String url = "https://" + bucketName + "." + endpoint + "/" + filename;
return url;
}
}