@
目錄- 前言
- 1、流程及圖
- 2、前端：
- 1.表單提交
- 2.上傳圖片及相關方法
- 3、組態檔application.xml
- 3、后端
- 1.控制器
- 2.上傳介面
- 3.七牛云上傳
- 4.遞回壓縮圖片
- 4、上傳如圖
前言
1、流程及圖
2、前端：
1.表單提交
<!-- 企業簡稱 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" >
<el-form :model="editEntity" ref="editEntity"
label- >
<el-row>
<el-col :span="2">
</el-col>
<el-col :span="12">
<el-button type="danger" disabled>{{editEntity.compayName}}</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="企業名稱" prop="name">
<el-input type="text" placeholder="請輸入企業名稱，最多輸入十個字"
v-model="editEntity.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="A類單位" prop="invoiceCompanyidA">
<el-select size="mini" v-model="editEntity.invoiceCompanyidA" >
<el-option v-for="invoiceCompanyItem in invoiceCompanyOptionsA" :key="invoiceCompanyItem.id"
:label="invoiceCompanyItem.name" :value="https://www.cnblogs.com/folyh/archive/2022/08/13/invoiceCompanyItem.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="A類公章" prop="taxImageUrl">
<el-upload :action="uploadImageUrl"
:multiple="false" accept="image/*" :limit="1024" :auto-upload="true"
:show-file-list="false" :on-success="handleUploadSuccess1">
<img v-if="editEntity.taxImageUrl"
:src="https://www.cnblogs.com/folyh/archive/2022/08/13/editEntity.taxImageUrl" >
<i v-else ></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" >
<el-button type="primary" @click="save()">確定</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</div>
</el-dialog>
2.上傳圖片及相關方法
handleUploadSuccess: function (res) {// 處理上傳成功事件
if (res.success) {// 成功
this.editAbbreviationFormEntity.imageUrl = res.data;
} else {// 失敗
this.$message.error(res.message);
}
},
3、組態檔application.xml
<!-- 本地檔案服務 -->
<bean >
<property name="fileServerSavepath" value="https://www.cnblogs.com/folyh/archive/2022/08/13/${file_server_savepath}" />
<property name="fileServerHttppath" value="https://www.cnblogs.com/folyh/archive/2022/08/13/${file_server_httppath}" />
</bean>
3、后端
1.控制器
/**
* 檔案目錄：圖片目錄
*/
public static final String FILE_DIR_CACHET = "cachet";
/**
* 上傳圖片
* @param file
* @return
*/
@RequestMapping("/uploadImage")
@ResponseBody
public Result uploadImage(MultipartFile file){
return fileService.uploadFile(file, Constants.FILE_DIR_CACHET);
}
2.上傳介面
private String fileServerSavepath;
private String fileServerHttppath;
public String getFileServerSavepath() {
return fileServerSavepath;
}
public void setFileServerSavepath(String fileServerSavepath) {
this.fileServerSavepath = fileServerSavepath;
}
public String getFileServerHttppath() {
return fileServerHttppath;
}
public void setFileServerHttppath(String fileServerHttppath) {
this.fileServerHttppath = fileServerHttppath;
}
/**
* 上傳到本地服務器
*/
public Result uploadFile(MultipartFile file, String dirName) {
String filePath = dirName + "/" + UUID.randomUUID().toString();
try {
File dest = new File(fileServerSavepath, filePath);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
file.transferTo(dest);
} catch (IllegalStateException | IOException e) {
String errorMsg = "上傳檔案[" + file.getOriginalFilename() + "]失敗！";
logger.error(errorMsg, e);
return Results.uploadError();
}
return Results.uploadOk(fileServerHttppath + filePath);
}
/**
* 上傳到七牛云
*/
public Result uploadFileQiniu(MultipartFile file) {
String uuid = UUID.randomUUID().toString();
InputStream is = null;
try {
is = file.getInputStream();
String imgUrl = QiniuUpload.uploadFile(is , uuid);
return Results.uploadOk(imgUrl);
}catch (Exception e){
e.printStackTrace();
}finally {
try {
if (is != null) {
is.close();
}
}catch (Exception e) {
e.printStackTrace();
}
}
return Results.error();
}
/**
* 按指定大小壓縮后上傳到七牛云
*/
public Result uploadImageResize(MultipartFile file, String dirName, double destFileSize) {
String uuid = UUID.randomUUID().toString();
String filePath = dirName + "/" + uuid;
try {
File dest = new File(fileServerSavepath, filePath);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
file.transferTo(dest);
if((Double.isNaN(destFileSize)) || "".equals(destFileSize)){
destFileSize = 15.0;
}
String imgUrl = QiniuUpload.uploadFile(ImageUtil.commpressImageRatio(dest,destFileSize), uuid);
return Results.uploadOk(imgUrl);
} catch (IllegalStateException | IOException e) {
String errorMsg = "上傳檔案[" + file.getOriginalFilename() + "]失敗！";
logger.error(errorMsg, e);
return Results.uploadError();
}
}
3.七牛云上傳
/**
* 上傳檔案到七牛云(檔案流)
* @param is 檔案流
* @param key 檔案名稱
* @return 云檔案訪問路徑
*/
public static String uploadFile(InputStream is, String key){
//構造一個帶指定 Region 物件的配置類
Configuration cfg = new Configuration(qiniuConfig.getRegion());
UploadManager uploadManager = new UploadManager(cfg);
try {
Response response = uploadManager.put(is, key, getAccessToken(), null, null);
//決議上傳成功的結果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
return qiniuConfig.getCdnPath() + putRet.key;
} catch (QiniuException ex) {
ex.printStackTrace();
}
return null;
}
4.遞回壓縮圖片
/**
* 按尺寸、精度及其他條件比例縮放
* @param file
* @param destFileSize 指定圖片大小（單位：kb）
* @throws IOException
*/
public static InputStream commpressImageRatio(File file,double destFileSize) throws IOException {
final int byteLenght = 1024; // 位元組長度
final double minRatio = 0.9; // 壓縮比率
double ratio = destFileSize/((double) file.length()/byteLenght);
if(ratio >= minRatio){
return new FileInputStream(file);
}else {
Thumbnails.of(file).scale(0.9).outputQuality(0.9).outputFormat("jpg").toFile(file);
String path = file.getAbsolutePath();
int i = path.lastIndexOf(".")+1;
String suffix = path.substring(i);
if(!suffix.equals("jpg")){
file = new File(file.getAbsolutePath()+".jpg");
File file1 = new File(path);
file1.delete();
}
double ratio1 = destFileSize/((double) file.length()/byteLenght);
if(ratio1 < minRatio){
commpressImageRatio(file,destFileSize);
}
return new FileInputStream(file);
}
}
4、上傳如圖
隨心所往，看見未來，Follow your heart，see night！
歡迎點贊、關注、留言，一起學習、交流！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501819.html
標籤：其他