Vue el-upload單圖片上傳功能實(shí)現(xiàn)
更新時(shí)間：2023年11月25日 10:42:15 作者：愛(ài)學(xué)習(xí)的瘋傾
這篇文章主要介紹了Vue el-upload單圖片上傳功能實(shí)現(xiàn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
一、前端相關(guān)：
<!--:action里面放圖片上傳調(diào)取的后臺(tái)方法 :headers設(shè)置上傳的請(qǐng)求頭部,使請(qǐng)求攜帶自定義token，獲取訪問(wèn)權(quán)限 -->
<!--:on-success圖片上傳成功后的回調(diào)方法，用于拿到圖片存儲(chǔ)路徑等信息-->
<!--:before-upload圖片上傳前的邏輯判斷，例如判斷圖片大小，格式等-->
<!--:on-preview圖片預(yù)覽方法 :on-remove圖片刪除方法 list-type代表文件列表的類型 -->
<!--file-list存放成功上傳圖片列表，這里此屬性用于修改功能時(shí)頁(yè)面已有圖片的顯示-->
<el-form-item label="預(yù)覽縮略圖" prop="articleImg" label-width="40">
<el-upload
:action="imgUpload.url"
:headers="imgUpload.headers"
list-type="picture-card"
:limit="limit"
:on-exceed="handleExceed"
:on-success="handlePictureSuccess"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:file-list="fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
</el-dialog>
</el-form-item>二、屬性值方法的定義：
export default {
name: "Article",
data() {
return {
// 圖片數(shù)量限制
limit: 1,
//頁(yè)面上存的暫時(shí)圖片地址List
fileList: [{url: ""}],
//圖片地址
imageUrl: "",
dialogVisible: false,
imgUpload: {
// 設(shè)置上傳的請(qǐng)求頭部
headers: {
Authorization: "Bearer " + getToken()
},
// 圖片上傳的方法地址:
url: process.env.VUE_APP_BASE_API + "/forum/forum/multiPicturesUpload",
}
};
},
methods: {
// 表單重置
reset()
{ ...... 忽略其它
this.fileList = undefined; this.resetForm("form");
}
/** 修改按鈕操作 */
handleUpdate(row) {
this.reset();
this.getTreeSelect();
const articleId = row.articleId || this.ids;
getArticle(articleId).then(response => {
this.fileList = [{ url: process.env.VUE_APP_BASE_API + response.data.articleImg}] this.form = response.data;
this.open = true;
this.title = "修改文章";
});
},
/** 提交按鈕 */
submitForm: function() {
this.form.articleImg = this.imageUrl; // 注：重要(用于添加到數(shù)據(jù)庫(kù))
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.articleId != undefined) {
updateArticle(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addArticle(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
//圖片上傳前的相關(guān)判斷
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG/PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過(guò) 5MB!');
}
return isJPG && isLt2M;
},
//圖片預(yù)覽
handlePictureCardPreview(file) {
this.imageUrl = file.url;
this.dialogVisible = true;
},
//圖片上傳成功后的回調(diào)
handlePictureSuccess(res, file) {
//設(shè)置圖片訪問(wèn)路徑 （articleImg 后臺(tái)傳過(guò)來(lái)的的上傳地址）
this.imageUrl = file.response.articleImg;
},
// 文件個(gè)數(shù)超出
handleExceed() {
this.$modal.msgError(`上傳鏈接LOGO圖片數(shù)量不能超過(guò) ${this.limit} 個(gè)!`);
},
}
};
export default {
name: "Article",
data() {
return {
// 圖片數(shù)量限制
limit: 1,
//頁(yè)面上存的暫時(shí)圖片地址List
fileList: [{url: ""}],
//圖片地址
imageUrl: "",
dialogVisible: false,
imgUpload: {
// 設(shè)置上傳的請(qǐng)求頭部
headers: {
Authorization: "Bearer " + getToken()
},
// 圖片上傳的方法地址:
url: process.env.VUE_APP_BASE_API + "/forum/forum/multiPicturesUpload",
}
};
},
methods: {
// 表單重置
reset()
{ ...... 忽略其它
this.fileList = undefined; this.resetForm("form");
}
/** 修改按鈕操作 */
handleUpdate(row) {
this.reset();
this.getTreeSelect();
const articleId = row.articleId || this.ids;
getArticle(articleId).then(response => {
this.fileList = [{ url: process.env.VUE_APP_BASE_API + response.data.articleImg}] this.form = response.data;
this.open = true;
this.title = "修改文章";
});
},
/** 提交按鈕 */
submitForm: function() {
this.form.articleImg = this.imageUrl; // 注：重要(用于添加到數(shù)據(jù)庫(kù))
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.articleId != undefined) {
updateArticle(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addArticle(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
//圖片上傳前的相關(guān)判斷
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG/PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過(guò) 5MB!');
}
return isJPG && isLt2M;
},
//圖片預(yù)覽
handlePictureCardPreview(file) {
this.imageUrl = file.url;
this.dialogVisible = true;
},
//圖片上傳成功后的回調(diào)
handlePictureSuccess(res, file) {
//設(shè)置圖片訪問(wèn)路徑 （articleImg 后臺(tái)傳過(guò)來(lái)的的上傳地址）
this.imageUrl = file.response.articleImg;
},
// 文件個(gè)數(shù)超出
handleExceed() {
this.$modal.msgError(`上傳鏈接LOGO圖片數(shù)量不能超過(guò) ${this.limit} 個(gè)!`);
},
}
};注：在提交事件中添加：this.form.articleImg = this.imageUrl；
三、效果如下：
四、后臺(tái)上傳圖片方法代碼：
注：articleImg傳給了前端 handlePictureSuccess回調(diào)方法中
/**
* 縮略圖上傳
*/
@Log(title = "預(yù)覽縮略圖", businessType = BusinessType.UPDATE)
@PostMapping("/articleImg")
public AjaxResult uploadFile(MultipartFile file) throws IOException
{
if (!file.isEmpty())
{
String articleImg = FileUploadUtils.upload(RuoYiConfig.getArticleImgPath(), file);
if (!StringUtils.isEmpty(articleImg))
{
AjaxResult ajax = AjaxResult.success();
ajax.put("articleImg", articleImg);
return ajax;
}
}
return AjaxResult.error("上傳圖片異常，請(qǐng)聯(lián)系管理員");
}
1、文件上傳工具類：FileUploadUtils
/**
* 根據(jù)文件路徑上傳
*
* @param baseDir 相對(duì)應(yīng)用的基目錄
* @param file 上傳的文件
* @return 文件名稱
* @throws IOException
*/
public static final String upload(String baseDir, MultipartFile file) throws IOException
{
try
{
return upload(baseDir, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
}
catch (Exception e)
{
throw new IOException(e.getMessage(), e);
}
}2、讀取項(xiàng)目相關(guān)配置：RuoYiConfig
package com.ruoyi.common.config;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
/**
* 讀取項(xiàng)目相關(guān)配置
*
* @author ruoyi
*/
@Component
@ConfigurationProperties(prefix = "ruoyi")
public class RuoYiConfig
{/** 上傳路徑 */
private static String profile;
public static String getProfile()
{
return profile;
}
public void setProfile(String profile)
{
RuoYiConfig.profile = profile;
}
/**
* 獲取導(dǎo)入上傳路徑
*/
public static String getImportPath()
{
return getProfile() + "/import";
}/**
* 獲取預(yù)覽縮略圖上傳路徑
* @return
*/
public static String getArticleImgPath()
{
return getProfile() + "/articleImg";
}
/**
* 獲取下載路徑
*/
public static String getDownloadPath()
{
return getProfile() + "/download/";
}
/**
* 獲取上傳路徑
*/
public static String getUploadPath()
{
return getProfile() + "/upload";
}
}到此這篇關(guān)于Vue el-upload單圖片上傳的文章就介紹到這了,更多相關(guān)Vue el-upload單圖片上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue3使用el-upload上傳文件示例詳解
- Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
- vue使用el-upload實(shí)現(xiàn)文件上傳功能
- vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
- vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳
- vue使用Element el-upload 組件踩坑記
- vue結(jié)合el-upload實(shí)現(xiàn)騰訊云視頻上傳功能
- vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
- vue?elementui?實(shí)現(xiàn)圖片上傳后拖拽排序功能示例代碼
- Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實(shí)例
相關(guān)文章
這篇文章主要介紹了vue路由相對(duì)路徑跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-08-08
詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問(wèn)題
這篇文章主要介紹了詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能
本文給大家?guī)?lái)一個(gè)小案例基于vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)功能，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
路由導(dǎo)航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導(dǎo)航過(guò)程中進(jìn)行攔截和控制,其中,beforeEach 導(dǎo)航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧2023-10-10
基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
最近一直在做 Vue項(xiàng)目代碼層面上的優(yōu)化，寫文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧2018-10-10
vue+elementUI用戶修改密碼的前端驗(yàn)證規(guī)則
用戶登錄后修改密碼,密碼需要一定的驗(yàn)證規(guī)則,這篇文章主要介紹了vue+elementUI用戶修改密碼的前端驗(yàn)證,需要的朋友可以參考下2024-03-03
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面這篇文章主要給大家介紹了關(guān)于vue.js使用的相關(guān)總結(jié),需要的朋友可以參考借鑒。2017-02-02