vue端
<el-upload
multiple
:action="uploadImg"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="uploadOk"
:headers="headers"
>
<i class="el-icon-plus"></i>
<el-dialog :visible.sync="dialogVisible" size="tiny">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</el-upload>
data() {
return {
imageUrl: '',
dialogImageUrl: "",
dialogVisible: false,
build: {
imageUrl: ''
},
headers: {
Authorization: "Bearer " + getToken()
},
};
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
uploadOk(response, file, fileList) {
this.build.imageUrl = response.data;
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
replyOk() {
this.openReply = false
if (this.build.imageUrl === '') {
this.$modal.msgError("请上传图片");
} else {
const param = {
'reply': this.textarea,
'imageUrl': this.build.imageUrl,
'buildId': this.selectRowId
}
addPicture(param).then(res => {
if (res.code === 200) {
this.$modal.msgSuccess("回复成功,工单完成")
this.getList()
}
})
.catch((error) => {
this.$modal.error(error)
})
}
this.textarea = '',
this.build.imageUrl = '',
this.selectRowId = null
},
后端代码
<!-- 七牛核心包-->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.28</version>
</dependency>
<!-- 传输协议-->
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.14.2</version>
</dependency>
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>happy-dns-java</artifactId>
<version>0.1.6</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
</dependency>
public class VariableNames {
public static final String accessKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
public static final String secretKey ="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
public static final String bucket ="demo";
public static final String pubdomain ="http://xxxxxxxxxxxxxxxxxxxx.com/";
}
public class QiniuUpload {
private static final String ACCESS_KEY = VariableNames.accessKey;
private static final String SECRET_KEY = VariableNames.secretKey;
private static final String bucketName = VariableNames.bucket;
private static Auth auth = Auth.create(ACCESS_KEY,SECRET_KEY);
private static Configuration cfg = new Configuration(Region.huanan());
private static UploadManager uploadManager = new UploadManager(cfg);
public static String getUpToken(){
return auth.uploadToken(bucketName);
}
public static String uploadFile(MultipartFile file){
try {
byte[] uploadBytes = file.getBytes();
String fileName = getRandomCharacterAndNumber(10)+".jpg";
Response response = uploadManager.put(uploadBytes, fileName, getUpToken());
DefaultPutRet putPet = new Gson().fromJson(response.bodyString(),DefaultPutRet.class);
String resUrl = VariableNames.pubdomain + putPet.key;
return resUrl;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
private static String getRandomCharacterAndNumber(int length) {
String val = "";
Random random = new Random();
for (int i = 0; i < length; i++) {
String charOrNum = random.nextInt(2) % 2 == 0 ? "char" : "num";
if ("char".equalsIgnoreCase(charOrNum))
{
int choice = random.nextInt(2) % 2 == 0 ? 65 : 97;
val += (char) (choice + random.nextInt(26));
val += (char) (choice + random.nextInt(26));
} else if ("num".equalsIgnoreCase(charOrNum))
{
val += String.valueOf(random.nextInt(10));
}
}
return val;
}
}
@PreAuthorize("@ss.hasPermi('system:build:upload')")
@Log(title = "工单", businessType = BusinessType.UPDATE)
@PostMapping("upload")
public AjaxResult uploadFile(@RequestParam("file") MultipartFile file){
AjaxResult result = new AjaxResult();
result.put("code",200);
String url = QiniuUpload.uploadFile(file);
result.put("data",url);
return result;
}
- 效果
图片: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GafDhL2p-1676951643664)(
]
)