上传图片至七牛云
本文最后更新于2 分钟前，文中所描述的信息可能已发生改变。使用的方式为服务端上传
导入七牛云JAVA-SDK java
前端上传组件 使用element-plus的el-load进行发送请求给后端文件上传接口，点击立即上传
axios部分jsimport axios from 'axios'
import {getToken} from '@/api/token.js'
const api = axios.create({
baseURL: "http://localhost:8081",
timeout: 5*1000,
// headers: {'Content-Type': 'application/json;charset=utf-8'}
})
api.interceptors.request.use(request=>{
if(getToken()){
request.headers['Authorization'] = getToken()
}
return request
},error=>{
Promise.reject(error)
})
api.interceptors.response.use(response=>{
console.log("响应值")
console.log(response.data)
return response.data
},error=>{
Promise.reject(error)
})
export default apiaxios请求jsimport api from '@/api/request.js'
export function fileLoad(file){
return api({
url: '/api/test/file/load',
method: 'POST',
data:file
})
}html部分html
ref="uploadRef" action="#" list-type="picture-card" :limit="1" :http-request="handleUpload" :before-upload="handleChange" accept=".png,.jpe,.jpeg" >
class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" > v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)" > v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" >
upload to server
js部分js后端接口 复制七牛云java-sdk文档中的服务端上传部分的代码稍作修改即可 Tips: ==文件链接为你绑定的域名+上传方法返回的key==
上传方法java@Component
public class QiNiuUtils {
@Autowired
private QiNiuProperties qn;
@LogRecord(module = "文件服务",operation = "文件上传")
public String upload(MultipartFile file,String fileName){
//构造一个带指定 Region 对象的配置类
Configuration cfg = new Configuration(Region.region0());
cfg.resumableUploadAPIVersion = Configuration.ResumableUploadAPIVersion.V2;// 指定分片上传版本
//...其他参数参考类注释
UploadManager uploadManager = new UploadManager(cfg);
//...生成上传凭证，然后准备上传
//默认不指定key的情况下，以文件内容的hash值作为文件名
try {
byte[] uploadBytes = file.getBytes();
Auth auth = Auth.create(qn.getAccessKey(), qn.getSecretKey());
String upToken = auth.uploadToken(qn.getBucket());
try {
Response response = uploadManager.put(uploadBytes, fileName, upToken);
//解析上传成功的结果
DefaultPutRet putRet = JsonUtil.convert(response.bodyString(), DefaultPutRet.class);
System.out.println("putRet.key: "+putRet.key);
System.out.println("putRet.hash: "+putRet.hash);
//返回的key即是上传后文件在容器中的文件名
return putRet.key;
} catch (QiniuException ex) {
ex.printStackTrace();
if (ex.response != null) {
System.err.println(ex.response);
try {
String body = ex.response.toString();
System.err.println(body);
} catch (Exception ignored) {
}
}
}
} catch (IOException ex) {
//ignore
}
return null;
}
}QiNiuProperties资源类java@ConfigurationProperties("qi-niu")
@Component
@Data
public class QiNiuProperties {
/**
* 七牛云控制台中复制
*/
public String accessKey;
public String secretKey;
/**
* 创建的桶名称
*/
public String bucket;
}在yml中配置相应属性ymlqi-niu:
accessKey: **********
secretKey: **********
bucket: holo-blog测试接口如果==要放入桶中的images文件夹下==，将其作为文件名前缀即可，七牛云会自动识别
java@PostMapping("/file/load")
public Result fileLoad(@RequestParam("image") MultipartFile file){
//源文件名
String filename = file.getOriginalFilename();
System.out.println("filename = " + filename);
// 如果要方入桶中的images文件夹下，将其作为文件名前缀即可，七牛云会自动识别
filename = "images/"+UUID.randomUUID() +filename;
System.out.println("filename = " + filename);
String fileUrl = qn.upload(file, filename);
return fileUrl!=null? Result.success(fileUrl,"上传成功"):Result.fail(StatusCode.FAIL.value(), "上传失败");
}Tips：前端发送表单数据中的数据项中文件的属性名要和后端接口中接收参数指定的文件属性名相同
参考文章 vue3使用ElementPlus upload上传文件的两种方式