1. 首先，需要在
七牛云上创建一个存储空间，并获取该存储空间的accessKey、secretKey、bucket和domain。
2. 在Springboot中引入
七牛云的Java SDK，可以通过Maven或Gradle进行引入。例如，在Maven中添加以下依赖：
```
<dependency>
<groupId>com.q
iniu</groupId>
<artifactId>q
iniu-java-sdk</artifactId>
<version>[7.2.0, 7.2.99]</version>
</dependency>
```
3. 创建一个
七牛云的配置类，用于存储accessKey、secretKey、bucket和domain等配置信息。
```
@Configuration
public class Q
iniuConfig {
@Value("${q
iniu.accessKey}")
private String accessKey;
@Value("${q
iniu.secretKey}")
private String secretKey;
@Value("${q
iniu.bucket}")
private String bucket;
@Value("${q
iniu.domain}")
private String domain;
@Bean
public Auth auth() {
return Auth.create(accessKey, secretKey);
}
@Bean
public Configuration configuration() {
return new Configuration(Zone.zone0());
}
@Bean
public UploadManager uploadManager() {
return new UploadManager(configuration());
}
@Bean
public BucketManager bucketManager() {
return new BucketManager(auth(), configuration());
}
@Bean
public StringMap putPolicy() {
StringMap putPolicy = new StringMap();
putPolicy.put("returnBody", "{\"key\":\"$(key)\",\"hash\":\"$(etag)\",\"bucket\":\"$(bucket)\",\"name\":\"$(fname)\",\"size\":$(fsize)}");
return putPolicy;
}
@Bean
public String uploadToken() {
return auth().uploadToken(bucket, null, 3600, putPolicy());
}
@Bean
public String domain() {
return domain;
}
}
```
4. 在
Vue中使用element-ui的
上传组件，设置
上传的接口为Springboot的接口。
```
<el-upload
class="upload-demo"
action="/api/upload"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:headers="{Authorization: 'Bearer ' + token}"
>
<el-button size="small" type="primary">点击
上传</el-button>
<div slot="tip" class="el-upload__tip">只能
上传jpg/png文件，且不超过500kb</div>
</el-upload>
```
5. 在Springboot中编写
上传接口，在该接口中使用
七牛云的Java SDK进行
上传。
```
@RestController
@RequestMapping("/api")
public class UploadController {
@Autowired
private UploadManager uploadManager;
@Autowired
private String uploadToken;
@Autowired
private String domain;
@PostMapping("/upload")
public ResponseEntity<?> upload(@RequestParam("file") MultipartFile file) throws IOException {
try {
Response response = uploadManager.put(file.getBytes(), null, uploadToken);
if (response.isOK()) {
String key =
JSON.parseObject(response.bodyString()).getString("key");
return ResponseEntity.ok(domain + "/" + key);
}
} catch (Q
iniuException e) {
e.printStackTrace();
}
return ResponseEntity.badRequest().build();
}
}
```
6. 程序运行后，在
Vue中
上传图片即可自动将图片
上传到
七牛云，并返回图片的访问URL。
最低0.47元/天 解锁文章
955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
