国产免费一区二区三区在线观看 ,怡红院精品久久久久久久高清,无码人妻一区二区三区精品视频

前言：
??我們在設(shè)計自己的網(wǎng)站的時候，一定會遇到上傳圖片的功能，比如：用戶頭像，商品圖片。
??這篇文章將帶著大家設(shè)計一個可以使用的圖片上傳功能，請大家一步一步來，讓我們在碼路上越走越遠(yuǎn) 。
前端：
組件引入
前端我們使用element-ui的組件。我這里以html加js的方式
1：引入vue.js，axios.js ， element-ui 。
<script src=http://www.wokk.cn/”../static/js/util/vue.min.js”>
<script src=http://www.wokk.cn/”https://cdn.staticfile.org/axios/0.18.0/axios.min.js”>
<!– 引入樣式 –>
<link rel=”stylesheet” href=http://www.wokk.cn/”https://unpkg.com/element-ui/lib/theme-chalk/index.css”>
<!– 引入組件庫 –>
<script src=http://www.wokk.cn/”https://unpkg.com/element-ui/lib/index.js”>
基礎(chǔ)文件上傳
2：element-ui中有多個例子，我們使用其中一個：
<el-upload
class=”avatar-uploader”
【javaweb上傳圖片到指定路徑 java上傳圖片到服務(wù)器】action=”/Manage/upBusinessImage”
:show-file-list=”false”
:on-success=”handleAvatarSuccess”
:before-upload=”beforeAvatarUpload”>
<img v-if=”imageUrl” :src=http://www.wokk.cn/”imageUrl” class=”avatar”>
<i v-else class=”el-icon-plus avatar-uploader-icon”></i>
</el-upload>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: ”
};
},
methods: {
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;
}
}
}
</script>
上面是element-ui中的一個例子。我將會對其中的各個參數(shù)進行講解。
其中的樣式，我們不進行講解，直接復(fù)制就可以。
el-upload中的參數(shù)：
action：后面是接口url,圖片文件將會發(fā)送到該接口中。
:show-file-list：是否顯示上傳的圖片列表
:on-success：上傳成功后要執(zhí)行的操作，“：”代表與js代碼進行了綁定。
:before-upload：上傳之前要執(zhí)行的操作，比如檢驗是否是圖片文件，圖片的大小是否符合要求等。
??在它的一個函數(shù)中使用了URL.createObjectURL(file.raw);方法，這個地方要注意：elementUI中，自帶的方法中的file，并不是指圖片本身，而是他的一個dom 。如果要是拿他的圖片，就要用file.raw 。
自定義上傳方法
??通過上面的方式就可以將圖片文件發(fā)送給后端，但是，這個只是基礎(chǔ)的功能，往往我們的業(yè)務(wù)不會如此簡單，比如：我們可能將商品id,等信息一同發(fā)送后端，以保證后端確定圖片的作用。此時上面的方式就滿足不了我們的需求了。
??為此我們需要設(shè)計自己的上傳方法。于是改造過程：
1：action后面的路徑改為空：action=””
2：添加屬性:http-request，后面跟自定義的方法名，例如：:http-request=“uploader”
3：在js中書寫自定義方法“uploader”
async uploader(params){
let file = params.file;
let clothesId;
let styleId;
let imgUrl;
clothesId = this.goodsModify.goodsId;
styleId = this.goodsModify.styleId;
imgUrl = this.goodsModify.goodsImg
formData = http://www.wokk.cn/new FormData();
formData.append(‘file’, file);
formData.append(‘clothesId’,clothesId);
formData.append(‘styleId’,styleId);
formData.append(‘imgUrl’,imgUrl);
let data = http://www.wokk.cn/await axios.post(“/Manage/upBusinessImage”,formData)
},
??說明一下如果要傳遞的是多個參數(shù)，則必須把多個參數(shù)整理成formData的形式進行發(fā)送。而到后端則需要用@RequestParam注解標(biāo)識進行接收。
后端：
需要引入的jar包：
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.11.0</version>
</dependency>
基礎(chǔ)文件上傳
Controller層：
@RequestMapping(value = http://www.wokk.cn/“/Manage/upBusinessImage”,method = RequestMethod.POST)
public CommonResultVo uploadBusinessImage(@RequestParam(value = http://www.wokk.cn/“file”, required = false) MultipartFile file) {
return fileService.uploadImage(file,”D:/img/HeadImages/”);
}
??因為只傳遞了文件，所以只需要一個MultipartFile類型的file接收就可以了。
server層：
//上傳操作
private CommonResultVo uploadImage(MultipartFile file,String folder){
if (file == null) {
return CommonResultVoUtil.error(“請選擇要上傳的圖片”);
}
if (file.getSize() > 1024 * 1024 * 10) {
return CommonResultVoUtil.error(“文件大小不能大于10M”);
}
//獲取文件后綴
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(“.”) + 1, file.getOriginalFilename().length());
if (!”jpg,jpeg,gif,png”.toUpperCase().contains(suffix.toUpperCase())) {
return CommonResultVoUtil.error(“請選擇jpg,jpeg,gif,png格式的圖片”);
}
String savePath = folder;
File savePathFile = new File(savePath);
if (!savePathFile.exists()) {
//若不存在該目錄，則創(chuàng)建目錄
savePathFile.mkdir();
}
//通過UUID生成唯一文件名
String filename = UUID.randomUUID().toString().replaceAll(“-“,””) + “.” + suffix;
try {
//將文件保存指定目錄
//file.transferTo(new File(savePath + filename));
//File file1 = new File(file.getOriginalFilename());
FileUtils.copyInputStreamToFile(file.getInputStream(),new File(savePath + filename));
} catch (Exception e) {
e.printStackTrace();
return CommonResultVoUtil.error(“保存文件異常”);
}
//返回文件名稱
return CommonResultVoUtil.successWithData(filename,1);
}
??代碼里的CommonResultVoUtil是我自定義的結(jié)果工具類，大家可以根據(jù)自己的需求自己構(gòu)建，也可直接返回字符串成功或者失敗。
自定義的多參數(shù)接口
與上面的區(qū)別只是多使用了幾個參數(shù)：
@RequestMapping(value = http://www.wokk.cn/“/Manage/upBusinessImage”,method = RequestMethod.POST)
public CommonResultVo uploadBusinessImage(@RequestParam(value = http://www.wokk.cn/“file”, required = false) MultipartFile file,
@RequestParam(value = http://www.wokk.cn/“clothesId”, required = false) String clothesId,
@RequestParam(value = http://www.wokk.cn/“styleId”, required = false) String styleId,
@RequestParam(value = http://www.wokk.cn/“imgUrl”, required = false) String imgUrl) {
return fileService.uploadBusinessImage(file,clothesId,styleId,imgUrl);
}
拿到這些參數(shù)后可以根據(jù)某些參數(shù)去定位數(shù)據(jù)庫中的某條記錄，然后將圖片位置保存入數(shù)據(jù)庫中，以便后續(xù)訪問。

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：