elementui 上传图片,vue 图片上传组件
元素加提供了上传者组件，但是不好定制化。所以本文将利用Vue3和元素加实现一个图片上传的组件，感兴趣的可以了解一下
目录
前言具体代码图片上传上传组件
前言
元素加提供了上传者组件，但是不好定制化，所以自己又造了个轮子，实现了一个图片上传的组件，它的预期行为是：
1.还没上传图片时，显示上传卡片
2.上传图片时显示进度条，隐藏上传卡片
3.上传成功时显示图片缩略图，上传失败则显示失败提示
4.支持上传图片的预览和删除
具体如下图所示：
具体代码
图片上传
这里使用的图床是牛图网，无需注册，貌似也没有图片大小的限制，但是请不要上传违规图像。
代码从" axios "导入爱可信
从“元素加”导入{ ElMessage }
const service=axios.create({
baseURL:"/image "
})
服务。截击机。回应。使用(response={
常量代码=response.data.code 200
如果（代码===200) {
返回响应.数据.数据
}
设msg=响应。数据。代码“”响应。数据。味精
ElMessage.error
返回Promise.reject(上传图片失败：消息)
})
/**
* 上传图片
* @param {File}文件图片文件
* @param {RefImpl}进度上传进度
* @退货承诺
*/
函数上传图像（文件，进度){
let formData=new formData()；
formData.append(file ，file)
退货服务({
网址："/上传",
方法： post ，
数据：formData，
onUploadProgress(事件){
设v=数学。回合(事件。已加载/事件。总计* 100)
progress.value=v==100？80:5
},
})
}
导出{上传图像}
这里使用onUploadProgress来监视上传进度，但是实际上直接使用计算出来的进度往往会和实际的存在很大的偏差，也就是说：即使你还在上传，axios也会告诉你已经上传完了，所以这里把100的进度换成了80,真正的100进度应该在服务器返回全球资源定位器(统一资源定位器)时设置。
受到同源策略的限制，我们需要在vue。配置。射流研究…中配置一下代理服务器：
codemodule.exports={
devServer: {
代理服务器：{
/image: {
目标： https://niupic.com/api ，
路径重写：{ ^/image: }，
},
}
}
}
上传组件
图片预览功能用的是vue-简易灯箱，如果没有安装的话可以新公共管理安装-保存vue-easy-lightbox@next安装一下。下面是具体代码：
代码模板
div class=uploader
投入
type=file
id=文件输入
style=display: none
accept=image/*
@change=onImageAdded
/
差异
class=卡上传-卡
@click=openFileDialog
v-if=！是否可见
挽救(保存的简写)
class=icon
宽度=28
高度=28
viewBox=0 0 1024 1024
xmlns= http://www。w3。 org/2000/SVG
小路
fill=#8c939d
d= M480 480 v128 a32 32 0 0164 0 v352 h352 a 32 32 0 110 64h 544 v352 a 32 32 0 11-64 0 v544 h128 a32 32 0010-64h 352 z
/路径
/svg
/div
卡片缩略图-卡片 v-show=缩略图可见
img src= alt=缩略图id=thumbnail /
label class= successlabelvisible
我是"成功的象征"
挽救(保存的简写)
class=icon
宽度=12
高度=12
viewBox=0 0 1024 1024
xmlns= http://www。w3。 org/2000/SVG
小路
填充=白色
d= m 406.656 706.944 l 195.84 496.256 a 32 32 0 10-45.248 l 256 256 512-512 a 32 32 0 00-45.248-45.248 l 406.592 706.944 z
/path/svg
/i
/标签
！-图标-
div class=缩略图-操作
span class=缩略图预览 @ click=处理缩略图预览
挽救(保存的简写)
class=icon
宽度=20
高度=20
viewBox=0 0 1024 1024
xmlns= http://www。w3。 org/2000/SVG
小路
填充=白色
德国马克=795.904 750.72德国马克124.992 124.928德国马克
/路径
/svg
/span
span class= thumbnail-delete @ click= handle thumbnail remove
挽救(保存的简写)
class=icon
宽度=20
高度=20
viewBox=0 0 1024 1024
xmlns= http://www。w3。 org/2000/SVG
小路
填充=白色
d= M160 256 h96a 32 32 0010-64h 256v 95.936 a32 32 0 0132-32h 256 a 32 32 0 0132 32v 192h 256 a 32 32 0 110 64h-64v 672 a32 32 0 01-32 32 0 32h 192 a 32 32 32 0 01-32-32v 256 zm 448
/路径
/svg
/span
/div
！-进度条-
埃尔-进展
type=circle
：百分比="进度"
v-show=isProgressVisible
：宽度=110
id=进度
/
/div
vue-简易灯箱
禁用移动
:visible=isLightBoxVisible
:imgs=localImageUrl
:index=index
@ hide= handleLightboxHide
/
/div
/模板
脚本
从“vue”导入{ ref，computed }；
从导入{上传图像}./API/image ；
从" @element-plus/icons-vue "导入{ Plus }；
从" vue-简易灯箱"导入vueeeasylightbox
从"元素加/库/组件"导入{ El消息}；
导出默认值{
名称： KilaKilaUploader ，
发出：[已上传，关于上传，已删除]，
组件：{ Plus，VueEasyLightbox }，
设置（道具、上下文){
设progress=ref(0)；
let is light box visible=ref(false)；
设isProgressVisible=ref(false)；
let isSuccessLabelVisible=ref(false)；
let imageUrl=ref()；
let local imageurl=ref()；
设index=ref(0)；
设缩略图是否可见=计算所得(()=本地imageurl。价值。长度0)；
函数openFileDialog() {
文档。getelementbyid(“文件输入”).单击();
}
函数onimageaded(){
让文件输入=文档。getelementbyid(“file-input”)；
if (fileInput.files.length==0) {
返回；
}
语境。emit( aboutToUpload )；
让文件=文件输入。文件[0]；
设置imageurl(URL。createobjecturl(file))；
上传（文件);
}
函数setImageUrl(url) {
让thumbnailEl=document。getelementbyid(“缩略图”)；
拇指姑娘。src=本地imageurl。value=URL
}
函数句柄缩略图移除(文件){
imageurl。值=" "；
本地imageurl。值=" "；
context.emit(removed ，file)；
}
函数handleThumbnailPreview() {
isLightBoxVisible.value=true
}
函数handlelightboxide(){
isLightBoxVisible.value=false
}
功能上传（文件){
进步。值=0；
isProgressVisible.value=true
issuccesslabelvisible。值=假；
上传图像(文件，进度)。然后（
(url)={
进度值=100
imageUrl.value=url
document.getElementById(缩略图)。src=url
context.emit(uploaded ，URL)；
setTimeout(()={
isProgressVisible.value=false
issuccesslabelvisible。值=真；
}, 200);
},
()={
isProgressVisible.value=false
本地imageurl。值=" "；
context.emit(uploaded ， )；
ElMessage.error(哎呀，图片上传出错啦~)
}
);
}
返回{
进步，
imageUrl，
localImageUrl，
索引，
isLightBoxVisible，
是拇指可见的，
isProgressVisible，
isSuccessLabelVisible，
handleThumbnailRemove，
handleThumbnailPreview，
handleLightboxHide，
openFileDialog，
onImageAdded，
setImageUrl，
};
},
};
/脚本
style lang=less 范围。上传者{
显示器：flex
}。卡片{
背景色：# fbfdff
边框：1px虚线# c0ccda
边框-半径：6px
宽度：148像素
身高：148像素
溢出：隐藏；
}。上传卡{
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
过渡：全0.3秒
光标：指针；
：悬停{
边框颜色：# 409eff
颜色：# 409eff
}
}。缩略图卡{
边框：1px实心# c0ccda
位置：相对；
#缩略图{
宽度：100%;
身高：100%;
对象适合：包含；
显示：内嵌；
}。成功标签{
位置：绝对；
右：-15px；
top:-6px；
宽度：40px
高度：24px
背景：# 67c23a
文本对齐：居中；
变换：旋转(45度);
box-shadow:0 0 1pc 1px # 0003；成功图标{
位置：绝对；
左：13px
top:1px；
变换：旋转(-45度);
}
}
#进度{
宽度：100%;
身高：100%;
位置：绝对；
top:0；
左：0;
背景：rgba(255，255，255，0.7)；
：深(。埃尔-进度-圆圈){
位置：绝对；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
}
}。缩略图-操作{
宽度：100%;
身高：100%;
背景：rgba(0，0，0，0.5)；
不透明度：0;
过渡：全0.4s缓和；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
位置：绝对；
top:0；
左：0;
边框-半径：6px。缩略图预览，缩略图-删除{
光标：指针；
边距：0 8px
显示：内嵌-块；
}
：悬停{
不透明度：1;
}
}
}
：深(。vel-img) {
box-shadow: 0 5px 20px 2px rgba(0，0，0，0.35)；
}
/风格
在图片上传之前、上传完成和移除图片的时候都会触发相应的自定义事件，父级组件可以处理这些事件来设置图片网址。
以上就是利用Vue3和元素加实现图片上传组件的详细内容，更多关于Vue3元素-还有图片上传的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。